All Prompts
All Prompts
Nexus Enterprise Cloud Landing Page Template
Шаблон лендинга Nexus Enterprise Cloud для бизнеса. Адаптивный HTML/CSS дизайн. Идеально для облачных сервисов и IT-компаний.
Prompt
<html lang="en" class="scroll-smooth"><head><meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Nexus — Enterprise Cloud Platform</title>
<meta name="description" content="Nexus helps teams build, scale, and monitor applications with enterprise-grade infrastructure.">
<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital,wght@0,400;1,400&family=Inter:wght@300;400;500;600&family=Space+Grotesk:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<!-- Iconify Script -->
<script src="https://code.iconify.design/iconify-icon/1.0.7/iconify-icon.min.js"></script>
<!-- Tailwind CSS -->
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
theme: {
extend: {
fontFamily: {
sans: ['Inter', 'sans-serif'],
serif: ['Instrument Serif', 'serif'],
display: ['Space Grotesk', 'sans-serif'],
},
colors: {
neutral: {
850: '#1f1f1f',
950: '#0a0a0a',
}
},
backgroundImage: {
'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
}
}
}
}
</script>
<style>
:root {
--mouse-x: 0px;
--mouse-y: 0px;
}
body {
background-color: #050505;
color: #e5e5e5;
overflow-x: hidden;
}
/* Hero Canvas */
#hero-canvas {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 0;
opacity: 0.4;
}
/* Glassmorphism Utilities */
.glass-panel {
background: rgba(255, 255, 255, 0.03);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.08);
}
/* Spotlight Effect on Cards */
.spotlight-card {
position: relative;
overflow: hidden;
background: rgba(20, 20, 20, 0.4);
border: 1px solid rgba(255, 255, 255, 0.08);
}
.spotlight-card::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(600px circle at var(--mouse-x) var(--mouse-y), rgba(255, 255, 255, 0.08), transparent 40%);
opacity: 0;
transition: opacity 0.5s;
pointer-events: none;
z-index: 2;
}
.spotlight-card:hover::before {
opacity: 1;
}
/* Film Grain Animation */
@keyframes grain {
0%, 100% { transform: translate(0, 0); }
10% { transform: translate(-5%, -10%); }
20% { transform: translate(-15%, 5%); }
30% { transform: translate(7%, -25%); }
40% { transform: translate(-5%, 25%); }
50% { transform: translate(-15%, 10%); }
60% { transform: translate(15%, 0%); }
70% { transform: translate(0%, 15%); }
80% { transform: translate(3%, 35%); }
90% { transform: translate(-10%, 10%); }
}
.bg-grain::after {
content: "";
background-image: url("https://upload.wikimedia.org/wikipedia/commons/7/76/Noise.png");
height: 300%;
width: 300%;
position: fixed;
top: -100%;
left: -100%;
opacity: 0.04;
animation: grain 8s steps(10) infinite;
pointer-events: none;
z-index: 9998;
}
/* Sticky Hero Logic */
.sticky-wrapper { position: relative; height: 250vh; }
.sticky-content {
position: sticky;
top: 0;
height: 100vh;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
/* 3D Book styling */
.book-3d { transform-style: preserve-3d; perspective: 1000px; }
.book-cover {
transform-origin: left;
transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
transform: rotateY(0deg);
}
.book-3d:hover .book-cover { transform: rotateY(-130deg); }
/* Utility */
.text-glow { text-shadow: 0 0 20px rgba(255, 255, 255, 0.3); }
/* ------------------------- */
/* ✅ FIXED Testimonials Anim */
/* ------------------------- */
/* IMPORTANT: mask must use WHITE for visibility */
.marquee-mask {
mask-image: linear-gradient(90deg, transparent, white 18%, white 82%, transparent);
-webkit-mask-image: linear-gradient(90deg, transparent, white 18%, white 82%, transparent);
}
@keyframes marqueeLeft {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
@keyframes marqueeRight {
from { transform: translateX(-50%); }
to { transform: translateX(0); }
}
.animate-marquee-left { animation: marqueeLeft 36s linear infinite; }
.animate-marquee-right { animation: marqueeRight 40s linear infinite; }
.marquee-group:hover .animate-marquee-left,
.marquee-group:hover .animate-marquee-right {
animation-play-state: paused;
}
@keyframes tFadeUp {
from { opacity: 0; transform: translateY(22px) scale(0.985); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.t-reveal { opacity: 0; transform: translateY(22px) scale(0.985); }
.t-reveal.is-visible { animation: tFadeUp 700ms cubic-bezier(0.2, 0.8, 0.2, 1) forwards; }
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js"></script>
<style id="border-gradient-shared-style">
[style*="--border-gradient"]::before {
content: "";
position: absolute;
inset: 0;
padding: 1px;
border-radius: var(--border-radius-before, inherit);
-webkit-mask: linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
background: var(--border-gradient);
pointer-events: none;
}</style> <style>
/* 3D Transform utilities */
</style><!-- aura-ga4-start -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-2M6V79H761"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-2M6V79H761');
</script>
<!-- aura-ga4-end -->
</head>
<body class="bg-grain antialiased selection:bg-white selection:text-black">
<!-- Custom Cursor -->
<!-- Mobile / Tablet Header (NO JS REQUIRED, always works) -->
<header class="fixed top-0 left-0 right-0 z-50 lg:hidden px-4 pt-4" id="mobile-header">
<!-- Toggle -->
<input id="nav-toggle" type="checkbox" class="peer hidden">
<div class="glass-panel rounded-full px-5 py-3 flex items-center justify-between shadow-2xl">
<a href="/home" class="font-display font-bold text-lg tracking-tight">
NEXUS.
</a>
<!-- Burger (label toggles checkbox) -->
<label for="nav-toggle" class="p-2 hover:bg-white/10 rounded-full transition cursor-pointer cursor-none-target select-none" aria-label="Open menu">
<iconify-icon icon="solar:hamburger-menu-linear" width="24" stroke-width="1.5"></iconify-icon>
</label>
</div>
<!-- Backdrop (tap to close) -->
<label for="nav-toggle" class="backdrop fixed inset-0 bg-black/40 opacity-0 pointer-events-none transition-opacity duration-300 lg:hidden"></label>
<!-- Menu panel -->
<nav id="mobile-menu" class="absolute top-20 left-4 right-4 glass-panel rounded-2xl p-5 border border-white/10 origin-top opacity-0 scale-[0.98] -translate-y-2 pointer-events-none transition-all duration-300" aria-label="Mobile navigation">
<div class="flex flex-col gap-2 text-center">
<a href="/Features" class="py-3 text-lg font-medium hover:text-white transition">
Features
</a>
<a href="/Solutions" class="py-3 text-lg font-medium hover:text-white transition">
Solutions
</a>
<a href="/Workflow" class="py-3 text-lg font-medium hover:text-white transition">
Workflow
</a>
<a href="/Company" class="py-3 text-lg font-medium hover:text-white transition">
Company
</a>
<a href="/Pricing" class="py-3 text-lg font-medium hover:text-white transition">
Pricing
</a>
</div>
</nav>
<style>
/* When checked: show backdrop + menu */
#mobile-header .peer:checked ~ .backdrop{
opacity: 1;
pointer-events: auto;
}
#mobile-header .peer:checked ~ #mobile-menu{
opacity: 1;
transform: translateY(0) scale(1);
pointer-events: auto;
}
</style>
</header>
<!-- =========================================================
DESKTOP LEFT NAV (2 SEPARATE BOXES, NO LAYOUT BREAK)
- Buttons stay fixed size (no rail resizing)
- Labels expand as a floating pill to the right (smooth)
- CTA is a separate box below (hovering it does NOT affect top)
- Scroll spy highlights current section (top rail only)
========================================================= -->
<!-- DESKTOP LEFT NAV -->
<nav class="hidden lg:block fixed top-1/2 -translate-y-1/2 left-6 z-50" aria-label="Section navigation" id="rail-nav">
<style>
#rail-nav {
isolation: isolate;
}
#rail-nav .rail-box {
position: relative;
width: 72px;
padding: 12px 10px;
border-radius: 18px;
border: 1px solid rgba(255, 255, 255, 0.1);
background: rgba(255, 255, 255, 0.03);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
user-select: none;
overflow: visible;
}
#rail-nav .rail-box::before {
content: "";
position: absolute;
inset: 8px;
border-radius: 14px;
background: linear-gradient(
180deg,
rgba(255, 255, 255, 0.07),
transparent 55%,
rgba(255, 255, 255, 0.05)
);
opacity: 0.55;
pointer-events: none;
z-index: 0;
}
#rail-nav .rail-btn {
position: relative;
z-index: 1;
width: 50px;
height: 50px;
border-radius: 18px;
border: 1px solid rgba(255, 255, 255, 0.1);
background: rgba(255, 255, 255, 0.02);
display: grid;
place-items: center;
cursor: pointer;
outline: none;
transition: transform 260ms cubic-bezier(0.16, 1, 0.3, 1),
background-color 260ms cubic-bezier(0.16, 1, 0.3, 1),
border-color 260ms cubic-bezier(0.16, 1, 0.3, 1);
}
#rail-nav .rail-btn:hover,
#rail-nav .rail-btn:focus-visible {
transform: translateX(2px);
background: rgba(255, 255, 255, 0.05);
border-color: rgba(255, 255, 255, 0.16);
}
#rail-nav .rail-icon {
width: 34px;
height: 34px;
border-radius: 12px;
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.12);
box-shadow: 0 0 0 7px rgba(255, 255, 255, 0.03);
display: grid;
place-items: center;
}
#rail-nav .rail-icon iconify-icon {
color: rgba(255, 255, 255, 0.9);
}
#rail-nav .rail-btn.is-active {
background: rgba(255, 255, 255, 0.06);
border-color: rgba(255, 255, 255, 0.18);
}
#rail-nav .rail-btn.is-active .rail-icon {
background: rgba(255, 255, 255, 0.92);
border-color: rgba(255, 255, 255, 0.22);
box-shadow: 0 0 0 7px rgba(255, 255, 255, 0.06), 0 18px 40px rgba(0, 0, 0, 0.35);
}
#rail-nav .rail-btn.is-active .rail-icon iconify-icon {
color: #0a0a0a;
}
#rail-nav .rail-label {
position: absolute;
left: calc(100% + 12px);
top: 50%;
transform: translateY(-50%) scaleX(0.92);
transform-origin: left center;
height: 42px;
display: inline-flex;
align-items: center;
padding: 0 14px;
border-radius: 14px;
background: linear-gradient(
180deg,
rgba(255, 255, 255, 0.14),
rgba(255, 255, 255, 0.06) 45%,
rgba(255, 255, 255, 0.03)
),
radial-gradient(120% 140% at 20% 10%, rgba(255, 255, 255, 0.1), transparent 55%);
border: 1px solid rgba(255, 255, 255, 0.16);
backdrop-filter: blur(18px) saturate(1.2);
-webkit-backdrop-filter: blur(18px) saturate(1.2);
box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.18),
inset 0 -1px 0 rgba(0, 0, 0, 0.35);
color: rgba(255, 255, 255, 0.92);
font-size: 12px;
font-weight: 800;
letter-spacing: 0.12em;
text-transform: uppercase;
white-space: nowrap;
opacity: 0;
pointer-events: none;
transition: opacity 220ms cubic-bezier(0.16, 1, 0.3, 1),
transform 260ms cubic-bezier(0.16, 1, 0.3, 1);
}
#rail-nav .rail-btn:hover .rail-label,
#rail-nav .rail-btn:focus-visible .rail-label {
opacity: 1;
transform: translateY(-50%) scaleX(1);
}
#rail-nav .cta-wrap {
margin-top: 16px;
}
#rail-nav .rail-btn.cta .rail-icon {
background: rgba(255, 255, 255, 0.92);
border-color: rgba(255, 255, 255, 0.22);
box-shadow: 0 0 0 7px rgba(255, 255, 255, 0.06), 0 18px 40px rgba(0, 0, 0, 0.35);
}
#rail-nav .rail-btn.cta .rail-icon iconify-icon {
color: #0a0a0a;
}
</style>
<div class="rail-box" id="rail-sections">
<a class="rail-btn is-active" href="/home" data-target="#home">
<span class="rail-icon"><iconify-icon icon="solar:home-angle-2-linear" width="18"></iconify-icon></span>
<span class="rail-label">Home</span>
</a>
<a class="rail-btn" href="/features" data-target="#features">
<span class="rail-icon"><iconify-icon icon="solar:widget-3-linear" width="18"></iconify-icon></span>
<span class="rail-label">Features</span>
</a>
<a class="rail-btn" href="/solutions" data-target="#solutions">
<span class="rail-icon"><iconify-icon icon="solar:layers-linear" width="18"></iconify-icon></span>
<span class="rail-label">Solutions</span>
</a>
<a class="rail-btn" href="/workflow" data-target="#workflow">
<span class="rail-icon"><iconify-icon icon="solar:graph-new-up-linear" width="18"></iconify-icon></span>
<span class="rail-label">Workflow</span>
</a>
<a class="rail-btn" href="/company" data-target="#company">
<span class="rail-icon"><iconify-icon icon="solar:buildings-3-linear" width="18"></iconify-icon></span>
<span class="rail-label">Company</span>
</a>
<a class="rail-btn" href="/pricing" data-target="#pricing">
<span class="rail-icon"><iconify-icon icon="solar:tag-price-linear" width="18"></iconify-icon></span>
<span class="rail-label">Pricing</span>
</a>
</div>
<div class="cta-wrap">
<div class="rail-box">
<a class="rail-btn cta" href="/pricing" data-target="#contact">
<span class="rail-icon"><iconify-icon icon="solar:arrow-right-linear" width="18"></iconify-icon></span>
<span class="rail-label">Start Free Trial</span>
</a>
</div>
</div>
<script>
(() => {
const sectionRail = document.getElementById("rail-sections");
if (!sectionRail) return;
const allBtns = Array.from(document.querySelectorAll("#rail-nav .rail-btn")).filter(
(a) => a.dataset.target
);
allBtns.forEach((a) => {
a.addEventListener("click", (e) => {
const el = document.querySelector(a.dataset.target);
if (!el) return;
e.preventDefault();
el.scrollIntoView({ behavior: "smooth", block: "start" });
});
});
const spyBtns = Array.from(sectionRail.querySelectorAll(".rail-btn"));
const spyTargets = spyBtns.map((a) => document.querySelector(a.dataset.target)).filter(Boolean);
let activeIndex = 0;
const setActive = (idx) => {
activeIndex = Math.max(0, Math.min(spyBtns.length - 1, idx));
spyBtns.forEach((a, i) => a.classList.toggle("is-active", i === activeIndex));
};
const io = new IntersectionObserver(
(entries) => {
const visible = entries.filter((e) => e.isIntersecting);
if (!visible.length) return;
const mid = window.innerHeight * 0.52;
visible.sort((a, b) => {
const da = Math.abs(a.boundingClientRect.top + a.boundingClientRect.height / 2 - mid);
const db = Math.abs(b.boundingClientRect.top + b.boundingClientRect.height / 2 - mid);
return da - db;
});
const best = visible[0].target;
const idx = spyTargets.indexOf(best);
if (idx !== -1 && idx !== activeIndex) setActive(idx);
},
{ threshold: [0.22, 0.35, 0.5, 0.65] }
);
spyTargets.forEach((s) => io.observe(s));
})();
</script>
</nav>
<!-- HERO SECTION -->
<section id="home" class="sticky-wrapper bg-black">
<div class="sticky-content w-full h-screen">
<canvas width="1512" height="906" class="" id="hero-canvas"></canvas>
<div id="hero-bg-image" class="absolute inset-0 z-10 flex items-center justify-center opacity-0 scale-90 blur-xl transition-all duration-100 ease-out pointer-events-none" style=" filter: blur(0px);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/66bdf28c-235f-4108-8297-4dbdbbc1a0b2_3840w.webp" class="w-full h-full object-cover opacity-40 mix-blend-screen" alt="Abstract Background">
<div class="absolute inset-0 bg-gradient-to-t from-black via-transparent to-black"></div>
</div>
<div class="absolute inset-0 z-20 flex items-center justify-center pointer-events-none overflow-hidden">
<div id="door-left" class="absolute right-[50%] h-full flex flex-col justify-center items-end pr-2 md:pr-8 bg-black z-30 w-[60vw] md:w-[55vw] will-change-transform border-r border-white/10">
<h1 class="font-display font-bold text-[12vw] leading-none text-white tracking-tighter whitespace-nowrap mix-blend-exclusion opacity-90">
CLOUD
</h1>
<p class="text-white/40 text-right w-full pr-2 mt-4 font-mono text-xs tracking-widest uppercase">
INFRASTRUCTURE FOR
</p>
</div>
<div id="door-right" class="absolute left-[50%] h-full flex flex-col justify-center items-start pl-2 md:pl-8 bg-black z-30 w-[60vw] md:w-[55vw] will-change-transform border-l border-white/10">
<h1 class="font-serif italic font-light text-[12vw] leading-none text-white tracking-tighter whitespace-nowrap mix-blend-exclusion opacity-90">
NATIVE
</h1>
<p class="text-white/40 text-left w-full pl-2 mt-4 font-mono text-xs tracking-widest uppercase">
MODERN TEAMS
</p>
</div>
</div>
<div class="z-20 transition-all duration-700 text-center opacity-0 pr-6 pl-6 relative translate-y-10" id="hero-content">
<div class="inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/5 px-4 py-1.5 text-xs font-medium text-neutral-200 backdrop-blur-md mb-8 hover-magnet cursor-none-target">
<span class="relative flex h-2 w-2">
<span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-blue-400 opacity-75"></span>
<span class="relative inline-flex rounded-full h-2 w-2 bg-blue-500"></span>
</span>
Nexus 2.0 Now Available
</div>
<h2 class="text-5xl md:text-7xl lg:text-8xl font-display font-semibold text-white tracking-tight mb-8 leading-[0.9]">
Scale your
<br>
<span class="font-serif italic text-neutral-400 font-light">
infrastructure instantly.
</span>
</h2>
<div class="flex flex-col sm:flex-row gap-4 mt-10 gap-x-4 gap-y-4 items-center justify-center">
<a href="/#contact" class="hover-magnet cursor-none-target group inline-flex items-center justify-center overflow-visible transition-all duration-300 hover:bg-neutral-200 hover:scale-105 font-medium text-neutral-950 bg-white h-12 rounded-full pr-8 pl-8 relative">
<span class="text-sm mr-2">Start Free Tria</span>
<iconify-icon icon="solar:arrow-right-linear" width="20" class="transition-transform group-hover:translate-x-1"></iconify-icon>
</a>
</div>
</div>
</div>
</section>
<!-- FEATURES -->
<section class="overflow-hidden bg-black pt-32 pr-6 pb-32 pl-6 relative" id="features">
<!-- Background Effects -->
<div class="absolute right-0 top-0 w-[40%] h-[40%] bg-blue-900/10 blur-[120px] rounded-full pointer-events-none"></div>
<div class="absolute bottom-0 left-0 w-[40%] h-[40%] bg-purple-900/10 blur-[120px] rounded-full pointer-events-none"></div>
<div class="max-w-7xl mx-auto relative z-10">
<!-- Section Header -->
<div class="flex flex-col md:flex-row justify-between items-end mb-20 scroll-reveal" style=" transition: opacity 0.8s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);">
<div class="">
<span class="font-mono text-xs text-blue-400 tracking-widest uppercase mb-2 block">
Platform
</span>
<h2 class="text-4xl md:text-5xl font-display font-bold tracking-tight text-white">
Powerful
<span class="font-serif italic text-white/60">Capabilities</span>
</h2>
</div>
<p class="text-neutral-400 max-w-sm mt-4 md:mt-0 text-sm leading-relaxed">
Everything you need to build, deploy, and scale your applications
with confidence and ease.
</p>
</div>
<!-- Layout Grid -->
<div class="grid grid-cols-1 lg:grid-cols-12 gap-6">
<!-- Large Card 1 -->
<div class="lg:col-span-6 group flex flex-col overflow-hidden md:p-8 hover:border-white/20 transition-all duration-300 bg-neutral-950 rounded-[32px] pt-6 pr-6 pb-6 pl-6 relative justify-between" style="position: relative; --border-gradient: linear-gradient(45deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0)); --border-radius-before: 32px">
<div class="absolute inset-0 bg-gradient-to-b from-white/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500 pointer-events-none"></div>
<div class="flex justify-between items-start mb-6 relative z-10">
<span class="px-3 py-1 rounded-full border border-white/10 bg-white/5 text-xs font-medium text-neutral-300 backdrop-blur-sm">
Analytics
</span>
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="text-neutral-500 group-hover:text-white transition-colors">
<line x1="7" y1="17" x2="17" y2="7"></line>
<polyline points="7 7 17 7 17 17"></polyline>
</svg>
</div>
<div class="relative w-full aspect-[2/1] rounded-2xl bg-gradient-to-br from-neutral-900 to-black border border-white/5 mb-8 overflow-hidden flex items-center justify-center group-hover:border-white/10 transition-colors">
<div class="absolute inset-0 bg-cover bg-center bg-[radial-gradient(ellipse_at_top,_var(--tw-gradient-stops))] from-blue-500/10 via-transparent to-transparent opacity-80 saturate-0 transition-all duration-500 group-hover:opacity-100 group-hover:saturate-50 bg-[url(https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/4699a06b-370e-405c-84fa-7450dd490ed6_1600w.jpg)]"></div>
<div class="z-10 group-hover:scale-105 transition-transform duration-500 bg-white/5 border-white/10 border rounded-2xl pt-4 pr-4 pb-4 pl-4 relative shadow-2xl backdrop-blur-md">
<iconify-icon icon="solar:graph-up-linear" width="48" class="text-blue-300"></iconify-icon>
</div>
</div>
<div class="relative z-10">
<h3 class="text-2xl font-display font-semibold tracking-tight text-white mb-3">
Real-time Analytics
</h3>
<p class="text-neutral-400 text-sm leading-relaxed mb-6 max-w-md">
Monitor your application performance in real-time with granular
data points, custom alerts, and detailed logs.
</p>
<div class="flex flex-wrap gap-2">
<span class="px-3 py-1.5 rounded-lg border border-white/10 bg-neutral-900 text-xs text-neutral-400">
Metrics
</span>
<span class="px-3 py-1.5 rounded-lg border border-white/10 bg-neutral-900 text-xs text-neutral-400">
Logs
</span>
<span class="px-3 py-1.5 rounded-lg border border-white/10 bg-neutral-900 text-xs text-neutral-400">
Tracing
</span>
</div>
</div>
</div>
<!-- Large Card 2 -->
<div class="lg:col-span-6 group flex flex-col overflow-hidden md:p-8 hover:border-white/20 transition-all duration-300 bg-neutral-950 rounded-[32px] pt-6 pr-6 pb-6 pl-6 relative justify-between" style="position: relative; --border-gradient: linear-gradient(45deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0)); --border-radius-before: 32px">
<div class="absolute inset-0 bg-gradient-to-b from-white/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500 pointer-events-none"></div>
<div class="flex justify-between items-start mb-6 relative z-10">
<span class="px-3 py-1 rounded-full border border-white/10 bg-white/5 text-xs font-medium text-neutral-300 backdrop-blur-sm">
Infrastructure
</span>
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="text-neutral-500 group-hover:text-white transition-colors">
<line x1="7" y1="17" x2="17" y2="7"></line>
<polyline points="7 7 17 7 17 17"></polyline>
</svg>
</div>
<div class="aspect-[2/1] overflow-hidden flex group-hover:border-white/10 transition-colors bg-[url()] bg-center bg-gradient-to-br from-neutral-900 to-black w-full border-white/5 border rounded-2xl mb-8 relative items-center justify-center">
<div class="bg-center transition-all duration-500 group-hover:opacity-100 group-hover:saturate-50 bg-[radial-gradient(ellipse_at_top,_var(--tw-gradient-stops))] from-purple-500/10 via-transparent to-transparent opacity-80 bg-cover absolute top-0 right-0 bottom-0 left-0 saturate-0" style="background-image: url('https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/1ece4fe8-fe69-4db3-b8e0-d6e7d003affb_1600w.webp')"></div>
<div class="z-10 group-hover:scale-105 transition-transform duration-500 bg-white/5 border-white/10 border rounded-2xl pt-4 pr-4 pb-4 pl-4 relative shadow-2xl backdrop-blur-md">
<iconify-icon icon="solar:download-square-outline" width="48" class="text-blue-300" height="48" style="color: rgb(147, 197, 253)"></iconify-icon>
</div>
</div>
<div class="relative z-10">
<h3 class="text-2xl font-display font-semibold tracking-tight text-white mb-3">
Global Edge
</h3>
<p class="text-neutral-400 text-sm leading-relaxed mb-6 max-w-md">
Deploy your logic to edge locations worldwide with a single
click. Reduce latency and improve user experience.
</p>
<div class="flex flex-wrap gap-2">
<span class="px-3 py-1.5 rounded-lg border border-white/10 bg-neutral-900 text-xs text-neutral-400">
CDN
</span>
<span class="px-3 py-1.5 rounded-lg border border-white/10 bg-neutral-900 text-xs text-neutral-400">
Serverless
</span>
<span class="px-3 py-1.5 rounded-lg border border-white/10 bg-neutral-900 text-xs text-neutral-400">
Edge
</span>
</div>
</div>
</div>
<!-- Small Card 1 -->
<div class="lg:col-span-4 group relative flex flex-col justify-between overflow-hidden rounded-[32px] border border-white/10 bg-neutral-950 p-6 md:p-8 hover:border-white/20 transition-all duration-300 min-h-[320px]">
<div class="absolute inset-0 bg-gradient-to-br from-white/5 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500 pointer-events-none"></div>
<div class="flex justify-between items-start mb-8 relative z-10">
<div class="w-12 h-12 rounded-xl bg-neutral-900 border border-white/10 flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
<iconify-icon icon="solar:shield-check-linear" width="24" class="text-white"></iconify-icon>
</div>
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="text-neutral-500 group-hover:text-white transition-colors">
<line x1="7" y1="17" x2="17" y2="7"></line>
<polyline points="7 7 17 7 17 17"></polyline>
</svg>
</div>
<div class="relative z-10 mt-auto">
<h3 class="text-xl font-display font-semibold tracking-tight text-white mb-3">
Enterprise Security
</h3>
<p class="text-neutral-400 text-sm leading-relaxed">
SOC2 Type II compliant, SSO, and advanced RBAC capabilities for
your organization.
</p>
</div>
</div>
<!-- Small Card 2 -->
<div class="lg:col-span-4 group relative flex flex-col justify-between overflow-hidden rounded-[32px] border border-white/10 bg-neutral-950 p-6 md:p-8 hover:border-white/20 transition-all duration-300 min-h-[320px]">
<div class="absolute inset-0 bg-gradient-to-br from-white/5 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500 pointer-events-none"></div>
<div class="flex justify-between items-start mb-8 relative z-10">
<div class="w-12 h-12 rounded-xl bg-neutral-900 border border-white/10 flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
<iconify-icon icon="solar:server-square-linear" width="24" class="text-white"></iconify-icon>
</div>
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="text-neutral-500 group-hover:text-white transition-colors">
<line x1="7" y1="17" x2="17" y2="7"></line>
<polyline points="7 7 17 7 17 17"></polyline>
</svg>
</div>
<div class="relative z-10 mt-auto">
<h3 class="text-xl font-display font-semibold tracking-tight text-white mb-3">
99.99% Uptime
</h3>
<p class="text-neutral-400 text-sm leading-relaxed">
Guaranteed availability with redundant infrastructure and
automatic failover.
</p>
</div>
</div>
<!-- Small Card 3 -->
<div class="lg:col-span-4 group relative flex flex-col justify-between overflow-hidden rounded-[32px] border border-white/10 bg-neutral-950 p-6 md:p-8 hover:border-white/20 transition-all duration-300 min-h-[320px]">
<div class="absolute inset-0 bg-gradient-to-br from-white/5 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500 pointer-events-none"></div>
<div class="flex justify-between items-start mb-8 relative z-10">
<div class="w-12 h-12 rounded-xl bg-neutral-900 border border-white/10 flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
<iconify-icon icon="solar:code-scan-linear" width="24" class="text-white"></iconify-icon>
</div>
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="text-neutral-500 group-hover:text-white transition-colors">
<line x1="7" y1="17" x2="17" y2="7"></line>
<polyline points="7 7 17 7 17 17"></polyline>
</svg>
</div>
<div class="relative z-10 mt-auto">
<h3 class="text-xl font-display font-semibold tracking-tight text-white mb-3">
Robust API
</h3>
<p class="text-neutral-400 text-sm leading-relaxed">
Full programmatic access to control your resources and automate
workflows.
</p>
</div>
</div>
</div>
</div>
</section>
<!-- SOLUTIONS -->
<section class="overflow-hidden bg-black pt-32 pb-32 relative" id="solutions">
<!-- Atmosphere -->
<div class="pointer-events-none absolute inset-0">
<div class="absolute -top-40 left-1/2 -translate-x-1/2 w-[900px] h-[900px] rounded-full blur-[140px] bg-white-900/15"></div>
<div class="absolute -bottom-40 right-1/2 translate-x-1/2 w-[900px] h-[900px] rounded-full blur-[140px] bg-blue-900/12"></div>
<div class="absolute inset-0 opacity-[0.18] bg-[radial-gradient(circle_at_center,rgba(255,255,255,0.05)_1px,transparent_1px)] bg-[length:44px_44px]"></div>
</div>
<div class="max-w-7xl mx-auto px-6 relative z-10">
<!-- Header -->
<div class="flex flex-col md:flex-row md:items-end md:justify-between gap-8 mb-16 scroll-reveal" style=" transition: opacity 0.8s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);">
<div class="">
<div class="inline-flex items-center gap-2 px-3 py-1 rounded-full border border-white/10 bg-white/5 backdrop-blur-md mb-4">
<span class="relative flex h-2 w-2">
<span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-purple-400 opacity-60"></span>
<span class="relative inline-flex rounded-full h-2 w-2 bg-purple-400"></span>
</span>
<span class="font-mono text-[10px] uppercase tracking-widest text-neutral-300">
Use Cases
</span>
</div>
<h2 class="text-4xl md:text-6xl font-display font-bold tracking-tight text-white">
Built for
<span class="font-serif italic text-white/60">Scale</span>
</h2>
<p class="text-neutral-400 text-sm mt-4 max-w-xl leading-relaxed">
A signal-driven case library. Hover a card to “lock” the preview.
The lens reveals detail without changing the page rhythm.
</p>
</div>
<a href="#" class="hidden md:inline-flex items-center gap-2 text-xs border-b border-white/30 pb-1 hover:text-white hover:border-white transition-all uppercase tracking-widest cursor-none-target">
View Case Studies
<iconify-icon icon="solar:arrow-right-up-linear"></iconify-icon>
</a>
</div>
<!-- Layout -->
<div class="grid grid-cols-1 lg:grid-cols-12 gap-10 items-start">
<!-- LEFT: Sticky Case Lens Preview -->
<div class="lg:col-span-6 lg:sticky lg:top-24">
<div id="casePreview" class="relative overflow-hidden rounded-3xl border border-white/10 bg-neutral-950 shadow-[0_0_70px_rgba(0,0,0,0.65)]" style="--mx:50%; --my:50%;">
<!-- Top rail -->
<div class="absolute top-0 left-0 right-0 h-14 border-b border-white/10 bg-white/[0.03] backdrop-blur-xl z-20 flex items-center justify-between px-5">
<div class="flex items-center gap-3">
<div class="w-2 h-2 rounded-full bg-green-400/80 shadow-[0_0_12px_rgba(74,222,128,0.35)]"></div>
<span class="font-mono text-[10px] uppercase tracking-widest text-neutral-400">
Live Preview
</span>
</div>
<div class="flex items-center gap-2">
<span id="pTag" class="text-[10px] font-mono uppercase tracking-widest text-neutral-400 border border-white/10 px-2 py-1 rounded-full">Fintech</span>
<span id="pId" class="text-[10px] font-mono uppercase tracking-widest text-white/40">ID: 01</span>
</div>
</div>
<!-- Image base -->
<div class="relative aspect-[16/10]">
<img id="pImg" src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/d298b12c-a71b-4ed0-b461-6e1541317268_1600w.webp" alt="Case preview" class="absolute inset-0 w-full h-full object-cover opacity-75" draggable="false">
<!-- Soft overlay to keep it premium -->
<div class="absolute inset-0 bg-gradient-to-t from-black via-black/10 to-black/40"></div>
<!-- LENS: reveals sharper/brighter area that follows mouse -->
<div id="lens" class="absolute inset-0" style="
-webkit-mask-image: radial-gradient(circle 140px at var(--mx) var(--my), black 0%, black 35%, transparent 62%);
mask-image: radial-gradient(circle 140px at var(--mx) var(--my), black 0%, black 35%, transparent 62%);
">
<img id="pImgLens" src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/d298b12c-a71b-4ed0-b461-6e1541317268_1600w.webp" alt="" class="absolute inset-0 w-full h-full object-cover" style="filter: contrast(1.12) saturate(1.1) brightness(1.05);" draggable="false">
<div class="absolute inset-0 bg-gradient-to-t from-black/20 via-transparent to-transparent"></div>
</div>
<!-- Lens ring -->
<div class="pointer-events-none absolute w-[320px] h-[320px] rounded-full border border-white/10" style="left: calc(var(--mx) - 160px); top: calc(var(--my) - 160px); box-shadow: 0 0 50px rgba(59,130,246,0.10) inset;"></div>
<!-- Bottom info -->
<div class="absolute left-0 right-0 bottom-0 p-6 md:p-8 z-10">
<div class="flex items-start justify-between gap-6">
<div class="">
<h3 id="pTitle" class="text-2xl md:text-3xl font-display font-bold text-white tracking-tight">Acme Finance</h3>
<p id="pDesc" class="text-neutral-300/80 text-sm mt-2 leading-relaxed max-w-xl">Handling millions of transactions securely with Nexus Vault and compliance clusters.</p>
</div>
<div class="hidden md:flex flex-col items-end gap-2">
<div id="pMetric" class="text-[10px] font-mono uppercase tracking-widest text-neutral-300 border border-white/10 bg-white/5 px-3 py-1 rounded-full">99.99% Uptime</div>
<div class="text-[10px] font-mono uppercase tracking-widest text-white/35">
Hover a case to switch
</div>
</div>
</div>
<!-- Mini stats strip -->
<div class="mt-6 grid grid-cols-3 gap-3 border-t border-white/10 pt-5">
<div class="rounded-xl border border-white/10 bg-white/5 backdrop-blur-md p-3">
<div class="text-[10px] font-mono uppercase tracking-widest text-white/35">
Latency
</div>
<div id="pS1" class="text-sm text-white mt-1">-38%</div>
</div>
<div class="rounded-xl border border-white/10 bg-white/5 backdrop-blur-md p-3">
<div class="text-[10px] font-mono uppercase tracking-widest text-white/35">
Cost
</div>
<div id="pS2" class="text-sm text-white mt-1">-21%</div>
</div>
<div class="rounded-xl border border-white/10 bg-white/5 backdrop-blur-md p-3">
<div class="text-[10px] font-mono uppercase tracking-widest text-white/35">
Deploy
</div>
<div id="pS3" class="text-sm text-white mt-1">2 mins</div>
</div>
</div>
</div>
</div>
<!-- Bottom glow line -->
<div class="pointer-events-none absolute bottom-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-white/20 to-transparent"></div>
</div>
</div>
<!-- RIGHT: Signal List -->
<div class="lg:col-span-6">
<div class="rounded-3xl border border-white/10 bg-white/[0.03] backdrop-blur-xl overflow-hidden">
<div class="px-6 py-5 border-b border-white/10 flex items-center justify-between">
<div class="flex items-center gap-3">
<div class="w-2 h-2 rounded-full bg-blue-400/80"></div>
<span class="font-mono text-[10px] uppercase tracking-widest text-neutral-400">
Case Feed
</span>
</div>
<div class="text-[10px] font-mono uppercase tracking-widest text-white/35">
Hover or click to lock
</div>
</div>
<div id="caseList" class="divide-y divide-white/10">
<!-- Item -->
<button type="button" class="case-item w-full text-left px-6 py-6 group cursor-none-target bg-white/[0.04]" data-id="01" data-tag="Fintech" data-title="Acme Finance" data-desc="Handling millions of transactions securely with Nexus Vault and compliance clusters." data-img="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/d298b12c-a71b-4ed0-b461-6e1541317268_1600w.webp" data-metric="99.99% Uptime" data-s1="-38%" data-s2="-21%" data-s3="2 mins">
<div class="flex items-start gap-4">
<div class="mt-1 flex flex-col items-center">
<div class="w-2.5 h-2.5 rounded-full bg-purple-400/80 shadow-[0_0_18px_rgba(168,85,247,0.25)]"></div>
<div class="w-px h-10 bg-gradient-to-b from-white/10 to-transparent mt-2"></div>
</div>
<div class="flex-1">
<div class="flex items-start justify-between gap-4">
<div class="">
<div class="flex items-center gap-3">
<h3 class="text-xl font-display font-bold text-white group-hover:underline decoration-1 underline-offset-4 decoration-white/30">
Acme Finance
</h3>
<span class="text-[10px] font-mono uppercase tracking-widest text-neutral-400 border border-white/10 px-2 py-1 rounded-full">
Fintech
</span>
</div>
<p class="text-neutral-400 text-sm mt-2 leading-relaxed max-w-xl">
Handling millions of transactions securely with
Nexus Vault and compliance clusters.
</p>
</div>
<div class="shrink-0 hidden sm:flex items-center gap-2">
<div class="w-10 h-10 rounded-full border border-white/10 bg-white/5 backdrop-blur grid place-items-center text-white/60 group-hover:text-white transition">
<iconify-icon icon="solar:arrow-right-up-linear" width="18"></iconify-icon>
</div>
</div>
</div>
<div class="mt-5 flex flex-wrap items-center gap-2">
<span class="text-[10px] font-mono uppercase tracking-widest text-white/35 border border-white/10 bg-black/30 px-2 py-1 rounded-full">
Signal: High
</span>
<span class="text-[10px] font-mono uppercase tracking-widest text-white/35 border border-white/10 bg-black/30 px-2 py-1 rounded-full">
Region: NA
</span>
<span class="text-[10px] font-mono uppercase tracking-widest text-white/35 border border-white/10 bg-black/30 px-2 py-1 rounded-full">
Mode: Compliance
</span>
</div>
</div>
</div>
</button>
<!-- Item -->
<button type="button" class="case-item w-full text-left px-6 py-6 group cursor-none-target" data-id="02" data-tag="SaaS" data-title="Orbit SaaS" data-desc="Scaling data pipelines for a high-growth analytics platform, processing 50TB+ daily." data-img="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/3342a2b6-f156-4160-b0b1-02393b8ee1f7_1600w.webp" data-metric="50TB+/day" data-s1="-29%" data-s2="-18%" data-s3="8 mins">
<div class="flex items-start gap-4">
<div class="mt-1 flex flex-col items-center">
<div class="w-2.5 h-2.5 rounded-full bg-blue-400/80 shadow-[0_0_18px_rgba(96,165,250,0.25)]"></div>
<div class="w-px h-10 bg-gradient-to-b from-white/10 to-transparent mt-2"></div>
</div>
<div class="flex-1">
<div class="flex items-start justify-between gap-4">
<div class="">
<div class="flex items-center gap-3">
<h3 class="text-xl font-display font-bold text-white group-hover:underline decoration-1 underline-offset-4 decoration-white/30">
Orbit SaaS
</h3>
<span class="text-[10px] font-mono uppercase tracking-widest text-neutral-400 border border-white/10 px-2 py-1 rounded-full">
SaaS
</span>
</div>
<p class="text-neutral-400 text-sm mt-2 leading-relaxed max-w-xl">
Scaling data pipelines for a high-growth analytics
platform, processing 50TB+ daily.
</p>
</div>
<div class="shrink-0 hidden sm:flex items-center gap-2">
<div class="w-10 h-10 rounded-full border border-white/10 bg-white/5 backdrop-blur grid place-items-center text-white/60 group-hover:text-white transition">
<iconify-icon icon="solar:arrow-right-up-linear" width="18"></iconify-icon>
</div>
</div>
</div>
<div class="mt-5 flex flex-wrap items-center gap-2">
<span class="text-[10px] font-mono uppercase tracking-widest text-white/35 border border-white/10 bg-black/30 px-2 py-1 rounded-full">
Signal: Stable
</span>
<span class="text-[10px] font-mono uppercase tracking-widest text-white/35 border border-white/10 bg-black/30 px-2 py-1 rounded-full">
Region: EU
</span>
<span class="text-[10px] font-mono uppercase tracking-widest text-white/35 border border-white/10 bg-black/30 px-2 py-1 rounded-full">
Mode: Data
</span>
</div>
</div>
</div>
</button>
<!-- You can duplicate more items following the same pattern -->
</div>
</div>
<!-- Mobile CTA -->
<a href="#" class="mt-8 md:hidden inline-flex items-center gap-2 text-xs border-b border-white/30 pb-1 hover:text-white hover:border-white transition-all uppercase tracking-widest cursor-none-target">
View Case Studies
<iconify-icon icon="solar:arrow-right-up-linear"></iconify-icon>
</a>
</div>
</div>
</div>
<!-- Footer line -->
<div class="absolute bottom-0 left-0 right-0 pointer-events-none">
<div class="absolute bottom-0 left-1/2 -translate-x-1/2 opacity-25 w-[60%] h-8" style="background: radial-gradient(ellipse 80% 100% at 50% 100%, rgba(255,255,255,0.35) 0%, rgba(255,255,255,0.18) 30%, transparent 70%);"></div>
<div class="h-px bg-white/10 w-full"></div>
</div>
<script>
(() => {
const preview = document.getElementById("casePreview");
const lens = document.getElementById("lens");
const scanline = document.getElementById("scanline");
const pImg = document.getElementById("pImg");
const pImgLens = document.getElementById("pImgLens");
const pTitle = document.getElementById("pTitle");
const pDesc = document.getElementById("pDesc");
const pTag = document.getElementById("pTag");
const pId = document.getElementById("pId");
const pMetric = document.getElementById("pMetric");
const pS1 = document.getElementById("pS1");
const pS2 = document.getElementById("pS2");
const pS3 = document.getElementById("pS3");
const items = Array.from(document.querySelectorAll(".case-item"));
let locked = false;
let active = items[0];
function applyFrom(el) {
const img = el.getAttribute("data-img");
const title = el.getAttribute("data-title");
const desc = el.getAttribute("data-desc");
const tag = el.getAttribute("data-tag");
const id = el.getAttribute("data-id");
const metric = el.getAttribute("data-metric");
const s1 = el.getAttribute("data-s1");
const s2 = el.getAttribute("data-s2");
const s3 = el.getAttribute("data-s3");
// micro fade
preview.animate(
[{ opacity: 1, transform: "translateY(0px)" }, { opacity: 0.75, transform: "translateY(2px)" }],
{ duration: 140, easing: "ease-out", fill: "forwards" }
).onfinish = () => {
pImg.src = img;
pImgLens.src = img;
pTitle.textContent = title;
pDesc.textContent = desc;
pTag.textContent = tag;
pId.textContent = "ID: " + id;
pMetric.textContent = metric;
pS1.textContent = s1;
pS2.textContent = s2;
pS3.textContent = s3;
preview.animate(
[{ opacity: 0.75, transform: "translateY(2px)" }, { opacity: 1, transform: "translateY(0px)" }],
{ duration: 220, easing: "cubic-bezier(0.16, 1, 0.3, 1)", fill: "forwards" }
);
// scanline flash
if (scanline) {
scanline.style.opacity = "0";
scanline.style.top = "18%";
scanline.animate(
[
{ transform: "translateY(0px)", opacity: 0 },
{ transform: "translateY(10px)", opacity: 1 },
{ transform: "translateY(240px)", opacity: 0 }
],
{ duration: 650, easing: "cubic-bezier(0.16, 1, 0.3, 1)" }
);
}
};
items.forEach((x) => x.classList.remove("bg-white/[0.04]"));
el.classList.add("bg-white/[0.04]");
active = el;
}
// Lens tracking
function setLensFromEvent(e) {
const r = preview.getBoundingClientRect();
const x = Math.max(0, Math.min(1, (e.clientX - r.left) / r.width));
const y = Math.max(0, Math.min(1, (e.clientY - r.top) / r.height));
preview.style.setProperty("--mx", (x * 100).toFixed(2) + "%");
preview.style.setProperty("--my", (y * 100).toFixed(2) + "%");
}
preview.addEventListener("mousemove", (e) => setLensFromEvent(e), { passive: true });
preview.addEventListener("mouseenter", () => {
lens && (lens.style.opacity = "1");
});
preview.addEventListener("mouseleave", () => {
// keep last position, just soften
lens && (lens.style.opacity = "0.95");
});
// List interactions
items.forEach((el) => {
el.addEventListener("mouseenter", () => {
if (locked) return;
applyFrom(el);
});
el.addEventListener("click", () => {
locked = true;
applyFrom(el);
// tiny “locked” confirmation pulse on preview border
preview.animate(
[{ boxShadow: "0 0 0 rgba(0,0,0,0)" }, { boxShadow: "0 0 0 1px rgba(96,165,250,0.35)" }, { boxShadow: "0 0 0 rgba(0,0,0,0)" }],
{ duration: 520, easing: "ease-out" }
);
});
});
// Unlock on ESC
window.addEventListener("keydown", (e) => {
if (e.key === "Escape") locked = false;
});
// Init
applyFrom(items[0]);
})();
</script>
</section>
<!-- WORKFLOW -->
<section class="overflow-hidden bg-black pt-32 pr-6 pb-32 pl-6 relative" id="workflow">
<!-- Local styles for the unique animation -->
<style>
/* Soft “glass” baseline if your project doesn't already define it */
#workflow .glass-panel {
background: linear-gradient(
180deg,
rgba(255, 255, 255, 0.06),
rgba(255, 255, 255, 0.02)
);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border: 1px solid rgba(255, 255, 255, 0.08);
box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
}
/* Reveal motion */
#workflow [data-wf-step] {
opacity: 0;
transform: translateY(22px) scale(0.99);
transition: opacity 700ms cubic-bezier(0.16, 1, 0.3, 1),
transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
will-change: transform, opacity;
}
#workflow [data-wf-step].is-visible {
opacity: 1;
transform: translateY(0) scale(1);
}
/* Step number chip: subtle glow when active */
#workflow [data-wf-chip] {
position: relative;
transition: transform 500ms cubic-bezier(0.16, 1, 0.3, 1),
background-color 500ms cubic-bezier(0.16, 1, 0.3, 1),
color 500ms cubic-bezier(0.16, 1, 0.3, 1),
border-color 500ms cubic-bezier(0.16, 1, 0.3, 1);
}
#workflow [data-wf-step].is-active [data-wf-chip] {
background: rgba(255, 255, 255, 0.92);
color: #0a0a0a;
border-color: rgba(255, 255, 255, 0.35);
transform: scale(1.06);
}
/* ✅ Removed green glow, replaced with neutral white glow */
#workflow [data-wf-step].is-active [data-wf-chip]::after {
content: "";
position: absolute;
inset: -18px;
background: radial-gradient(
circle at center,
rgba(255, 255, 255, 0.12),
transparent 65%
);
filter: blur(8px);
pointer-events: none;
}
/* Card focus ring (keyboard) - ✅ removed green, made neutral */
#workflow [data-wf-card]:focus-visible {
outline: none;
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.22),
0 0 0 8px rgba(255, 255, 255, 0.06);
border-color: rgba(255, 255, 255, 0.16);
}
/* Canvas layer */
#workflow canvas[data-wf-canvas] {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 5;
opacity: 0.95;
}
/* ✅ Ambient “fog” - removed green/blue glow; kept subtle depth */
#workflow .wf-fog {
position: absolute;
inset: -20%;
background: radial-gradient(
circle at 50% 50%,
rgba(255, 255, 255, 0.03),
transparent 60%
);
filter: blur(18px);
pointer-events: none;
z-index: 2;
}
</style>
<!-- Background atmosphere -->
<div class="absolute inset-0 pointer-events-none">
<div class="wf-fog"></div>
<div class="absolute inset-0 opacity-[0.18]" style="
background-image: radial-gradient(
circle at center,
rgba(255, 255, 255, 0.05) 1px,
transparent 1px
);
background-size: 42px 42px;
"></div>
<div class="absolute inset-0" style="
background: radial-gradient(
ellipse 70% 55% at 50% 20%,
rgba(255, 255, 255, 0.06),
transparent 60%
);
"></div>
</div>
<!-- Data stream canvas -->
<canvas data-wf-canvas="" aria-hidden="true" width="3024" height="2122" style="width: 1512px; height: 1061px;"></canvas>
<div class="max-w-5xl mx-auto relative z-10">
<div class="text-center mb-20">
<span class="font-mono text-[10px] px-3 py-1 rounded-full border border-white/10 bg-white/5 backdrop-blur-md text-white/60 tracking-widest uppercase mb-3 inline-block">
Workflow
</span>
<h2 class="text-4xl md:text-5xl font-display font-bold text-white">
Seamless
<span class="font-serif italic text-white/60">Integration</span>
</h2>
<p class="text-neutral-400 text-sm mt-4 max-w-xl mx-auto leading-relaxed">
A timeline that behaves like a live system, not a static checklist.
</p>
</div>
<div class="relative">
<!-- Soft spine behind everything -->
<div class="absolute left-[24px] md:left-[27px] top-0 bottom-0 w-px bg-gradient-to-b from-transparent via-white/10 to-transparent"></div>
<div class="flex flex-col gap-12 relative">
<!-- STEP 01 -->
<div data-wf-step="" data-wf-index="0" class="flex gap-6 md:gap-10 group is-active">
<div data-wf-chip="" class="relative z-10 w-12 h-12 md:w-14 md:h-14 rounded-full border border-white/10 bg-neutral-900 flex items-center justify-center shrink-0 shadow-[0_0_30px_rgba(255,255,255,0.05)] font-mono text-sm text-white/90">
01
</div>
<div data-wf-card="" tabindex="0" class="glass-panel p-6 md:p-8 rounded-2xl w-full border-white/5 transition-transform duration-300 hover:-translate-y-1">
<div class="flex items-center justify-between gap-6">
<h3 class="text-xl font-bold text-white">Connect Data</h3>
<div class="text-[10px] font-mono uppercase tracking-widest text-white/40">
source mapping
</div>
</div>
<p class="text-neutral-400 text-sm leading-relaxed mt-3">
Link repos and databases. Nexus detects your stack and builds
a clean baseline automatically.
</p>
<!-- micro detail -->
<div class="mt-6 flex items-center gap-3">
<div class="h-1.5 w-1.5 rounded-full bg-white/60"></div>
<div class="h-px flex-1 bg-white/10"></div>
<div class="text-[10px] font-mono text-white/35">
auto-detect
</div>
</div>
</div>
</div>
<!-- STEP 02 -->
<div data-wf-step="" data-wf-index="1" class="flex gap-6 md:gap-10 group">
<div data-wf-chip="" class="relative z-10 w-12 h-12 md:w-14 md:h-14 rounded-full border border-white/10 bg-neutral-900 flex items-center justify-center shrink-0 shadow-[0_0_30px_rgba(255,255,255,0.05)] font-mono text-sm text-white/90">
02
</div>
<div data-wf-card="" tabindex="0" class="glass-panel p-6 md:p-8 rounded-2xl w-full border-white/5 transition-transform duration-300 hover:-translate-y-1">
<div class="flex items-center justify-between gap-6">
<h3 class="text-xl font-bold text-white">
Configure & Automate
</h3>
<div class="text-[10px] font-mono uppercase tracking-widest text-white/40">
policy engine
</div>
</div>
<p class="text-neutral-400 text-sm leading-relaxed mt-3">
Define CI/CD, env variables, and scaling rules. The system
turns settings into stable behavior.
</p>
<div class="mt-6 flex items-center gap-3">
<div class="h-1.5 w-1.5 rounded-full bg-white/60"></div>
<div class="h-px flex-1 bg-white/10"></div>
<div class="text-[10px] font-mono text-white/35">
guardrails
</div>
</div>
</div>
</div>
<!-- STEP 03 -->
<div data-wf-step="" data-wf-index="2" class="flex gap-6 md:gap-10 group">
<div data-wf-chip="" class="relative z-10 w-12 h-12 md:w-14 md:h-14 rounded-full border border-white/10 bg-neutral-900 flex items-center justify-center shrink-0 shadow-[0_0_30px_rgba(255,255,255,0.05)] font-mono text-sm text-white/90">
03
</div>
<div data-wf-card="" tabindex="0" class="glass-panel p-6 md:p-8 rounded-2xl w-full border-white/5 transition-transform duration-300 hover:-translate-y-1">
<div class="flex items-center justify-between gap-6">
<h3 class="text-xl font-bold text-white">
Deploy & Monitor
</h3>
<div class="text-[10px] font-mono uppercase tracking-widest text-white/40">
live telemetry
</div>
</div>
<p class="text-neutral-400 text-sm leading-relaxed mt-3">
Push with zero downtime. Track health and performance with
signals that stay readable under load.
</p>
<div class="mt-6 flex items-center gap-3">
<div class="h-1.5 w-1.5 rounded-full bg-white/60"></div>
<div class="h-px flex-1 bg-white/10"></div>
<div class="text-[10px] font-mono text-white/35">trace</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="absolute bottom-0 left-0 right-0 pointer-events-none">
<div class="absolute bottom-0 left-1/2 -translate-x-1/2 opacity-25 w-[60%] h-8" style="
background: radial-gradient(
ellipse 80% 100% at 50% 100%,
rgba(255, 255, 255, 0.4) 0%,
rgba(255, 255, 255, 0.2) 30%,
transparent 70%
);
"></div>
<div class="h-px bg-white/10 w-full"></div>
</div>
<!-- Unique animation logic: live stream that reroutes to the active step -->
<script>
(() => {
const root = document.getElementById("workflow");
if (!root) return;
const canvas = root.querySelector("canvas[data-wf-canvas]");
const ctx = canvas.getContext("2d", { alpha: true });
const steps = Array.from(root.querySelectorAll("[data-wf-step]"));
const cards = Array.from(root.querySelectorAll("[data-wf-card]"));
// Reveal on view
const io = new IntersectionObserver(
(entries) => {
entries.forEach((e) => {
if (e.isIntersecting) e.target.classList.add("is-visible");
});
},
{ threshold: 0.18 }
);
steps.forEach((s) => io.observe(s));
// Active handling
let activeIndex = 0;
const setActive = (idx) => {
activeIndex = Math.max(0, Math.min(steps.length - 1, idx));
steps.forEach((s, i) => s.classList.toggle("is-active", i === activeIndex));
};
setActive(0);
// Hover or focus sets active target
steps.forEach((s, i) => {
s.addEventListener("mouseenter", () => setActive(i));
const card = s.querySelector("[data-wf-card]");
if (card) card.addEventListener("focus", () => setActive(i));
});
// Canvas sizing
const resize = () => {
const r = root.getBoundingClientRect();
const dpr = Math.min(2, window.devicePixelRatio || 1);
canvas.width = Math.floor(r.width * dpr);
canvas.height = Math.floor(r.height * dpr);
canvas.style.width = r.width + "px";
canvas.style.height = r.height + "px";
ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
};
// Geometry helpers
const getChipCenter = (stepEl) => {
const chip = stepEl.querySelector("[data-wf-chip]");
const rr = root.getBoundingClientRect();
const cr = chip.getBoundingClientRect();
return {
x: cr.left + cr.width / 2 - rr.left,
y: cr.top + cr.height / 2 - rr.top,
};
};
const bezier = (p0, p1, p2, p3, t) => {
const u = 1 - t;
const tt = t * t;
const uu = u * u;
const uuu = uu * u;
const ttt = tt * t;
return {
x: uuu * p0.x + 3 * uu * t * p1.x + 3 * u * tt * p2.x + ttt * p3.x,
y: uuu * p0.y + 3 * uu * t * p1.y + 3 * u * tt * p2.y + ttt * p3.y,
};
};
// Particles that move along the path like a living stream
const particles = [];
const MAX_P = 90;
const rand = (a, b) => a + Math.random() * (b - a);
const spawn = () => {
if (particles.length >= MAX_P) return;
particles.push({
t: Math.random(),
speed: rand(0.1, 0.26),
size: rand(0.6, 1.6),
glow: rand(0.6, 1.0),
lane: rand(-1, 1),
jitter: rand(0.0, 1.0),
hueBias: rand(0, 1),
});
};
// Build a curved path that goes through all chips
const buildPathPoints = () => {
const pts = steps.map(getChipCenter);
if (pts.some((p) => !isFinite(p.x) || !isFinite(p.y))) return null;
return pts;
};
// Drawing
let last = 0;
const draw = (now) => {
const dt = Math.min(0.034, (now - last) / 1000 || 0.016);
last = now;
const rr = root.getBoundingClientRect();
ctx.clearRect(0, 0, rr.width, rr.height);
const pts = buildPathPoints();
if (!pts || pts.length < 2) {
requestAnimationFrame(draw);
return;
}
// Scroll-based calm intensity
const viewMid = rr.top + rr.height * 0.45;
const dist = Math.abs(viewMid - window.innerHeight * 0.5);
const scrollBoost = Math.max(0, 1 - dist / (window.innerHeight * 0.7));
// Draw a “spine” curve by stitching segments
const segments = [];
for (let i = 0; i < pts.length - 1; i++) {
const a = pts[i];
const b = pts[i + 1];
// Control points: slight right drift, organic bend
const dx = Math.min(140, Math.abs(b.x - a.x) + 110);
const c1 = { x: a.x + dx * 0.65, y: a.y + (b.y - a.y) * 0.15 };
const c2 = { x: b.x + dx * 0.1, y: a.y + (b.y - a.y) * 0.85 };
segments.push({ a, c1, c2, b });
}
// Base glow line (subtle)
ctx.save();
ctx.globalAlpha = 0.38;
ctx.lineWidth = 1.25;
ctx.beginPath();
segments.forEach((s, idx) => {
if (idx === 0) ctx.moveTo(s.a.x, s.a.y);
ctx.bezierCurveTo(s.c1.x, s.c1.y, s.c2.x, s.c2.y, s.b.x, s.b.y);
});
ctx.strokeStyle = "rgba(255,255,255,0.12)";
ctx.stroke();
ctx.restore();
// Active segment emphasis (✅ neutral glow)
const activeSegIndex = Math.max(0, Math.min(segments.length - 1, activeIndex));
const activeSeg = segments[Math.min(activeSegIndex, segments.length - 1)];
ctx.save();
ctx.globalAlpha = 0.65 * (0.6 + 0.4 * scrollBoost);
ctx.lineWidth = 2.0;
ctx.lineCap = "round";
ctx.shadowBlur = 12;
ctx.shadowColor = "rgba(255,255,255,0.18)";
const g = ctx.createLinearGradient(activeSeg.a.x, activeSeg.a.y, activeSeg.b.x, activeSeg.b.y);
g.addColorStop(0, "rgba(255,255,255,0)");
g.addColorStop(0.35, "rgba(255,255,255,0.28)");
g.addColorStop(0.7, "rgba(255,255,255,0.55)");
g.addColorStop(1, "rgba(255,255,255,0.45)");
ctx.strokeStyle = g;
ctx.beginPath();
ctx.moveTo(activeSeg.a.x, activeSeg.a.y);
ctx.bezierCurveTo(
activeSeg.c1.x,
activeSeg.c1.y,
activeSeg.c2.x,
activeSeg.c2.y,
activeSeg.b.x,
activeSeg.b.y
);
ctx.stroke();
ctx.restore();
// Spawn particles continuously
for (let i = 0; i < 3; i++) spawn();
// Draw particles along the full stitched curve
const totalSegs = segments.length;
particles.forEach((p) => {
p.t += p.speed * dt * (0.9 + scrollBoost * 0.35);
if (p.t > 1) p.t -= 1;
const segFloat = p.t * totalSegs;
const segIndex = Math.floor(segFloat);
const localT = segFloat - segIndex;
const seg = segments[Math.min(segIndex, totalSegs - 1)];
const pt = bezier(seg.a, seg.c1, seg.c2, seg.b, localT);
// Lane offset to create a “bundle” effect
const lane = p.lane * 4.2;
const wobble = Math.sin(now * 0.0012 + p.jitter * 10) * 1.2;
const x = pt.x + lane + wobble;
const y = pt.y + Math.cos(now * 0.0011 + p.jitter * 9) * 1.0;
const isNearActive = segIndex === Math.min(activeIndex, totalSegs - 1);
const intensity = isNearActive ? 1.0 : 0.55;
ctx.save();
ctx.globalAlpha = (0.10 + p.glow * 0.20) * intensity;
ctx.shadowBlur = 14 * intensity;
ctx.shadowColor = "rgba(255,255,255,0.15)";
// dot
ctx.beginPath();
ctx.arc(x, y, p.size * (0.9 + 0.6 * intensity), 0, Math.PI * 2);
ctx.fillStyle = isNearActive ? "rgba(255,255,255,0.75)" : "rgba(148,163,184,0.55)";
ctx.fill();
// tiny trailing streak
ctx.globalAlpha *= 0.65;
ctx.lineWidth = 1.0;
ctx.beginPath();
ctx.moveTo(x, y);
ctx.lineTo(x - 10 * intensity, y + 2);
ctx.strokeStyle = isNearActive ? "rgba(255,255,255,0.35)" : "rgba(255,255,255,0.16)";
ctx.stroke();
ctx.restore();
});
// Trim particles list
if (particles.length > MAX_P) particles.splice(0, particles.length - MAX_P);
requestAnimationFrame(draw);
};
// Keyboard: allow arrow navigation
let kbIndex = 0;
const onKey = (e) => {
const k = e.key;
if (k === "ArrowDown" || k === "ArrowRight") {
kbIndex = (kbIndex + 1) % steps.length;
setActive(kbIndex);
}
if (k === "ArrowUp" || k === "ArrowLeft") {
kbIndex = (kbIndex - 1 + steps.length) % steps.length;
setActive(kbIndex);
}
};
root.addEventListener("keydown", onKey);
// Keep canvas aligned with layout changes
const relayout = () => {
resize();
};
window.addEventListener("resize", () => requestAnimationFrame(relayout), { passive: true });
window.addEventListener("scroll", () => requestAnimationFrame(relayout), { passive: true });
window.addEventListener("load", () => setTimeout(relayout, 80));
// Initial
relayout();
requestAnimationFrame(draw);
})();
</script>
</section>
<!-- COMPANY -->
<section class="overflow-hidden bg-neutral-900/20 pt-32 pr-6 pb-32 pl-6 relative" id="company">
<style>
/* ================================
COMPANY (polished + unique)
Adds: premium hover tilt + light sweep + layer depth
================================= */
#company [data-co-reveal] {
opacity: 0;
transform: translateY(18px) scale(0.99);
transition: opacity 900ms cubic-bezier(0.16, 1, 0.3, 1),
transform 900ms cubic-bezier(0.16, 1, 0.3, 1);
will-change: transform, opacity;
}
#company [data-co-reveal].is-visible {
opacity: 1;
transform: translateY(0) scale(1);
}
#company .co-grid {
position: absolute;
inset: -10%;
background-image:
radial-gradient(circle at 50% 50%, rgba(255,255,255,0.06) 1px, transparent 1px),
linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
background-size: 48px 48px, 180px 180px, 180px 180px;
background-position: center, center, center;
opacity: 0.16;
pointer-events: none;
z-index: 1;
mask-image: radial-gradient(circle at 50% 30%, black 0%, black 55%, transparent 85%);
}
#company .co-halo {
position: absolute;
inset: -25%;
background:
radial-gradient(circle at 35% 35%, rgba(255,255,255,0.06), transparent 55%),
radial-gradient(circle at 70% 65%, rgba(255,255,255,0.04), transparent 60%);
filter: blur(18px);
pointer-events: none;
z-index: 1;
opacity: 0.9;
}
#company .co-chip {
border: 1px solid rgba(255,255,255,0.10);
background: rgba(255,255,255,0.04);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
#company .co-tile {
background: linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.02));
border: 1px solid rgba(255,255,255,0.10);
box-shadow: 0 30px 80px rgba(0,0,0,0.55);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
}
#company .co-runway {
border-top: 1px solid rgba(255,255,255,0.10);
border-bottom: 1px solid rgba(255,255,255,0.10);
background: linear-gradient(90deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01), rgba(255,255,255,0.03));
}
/* Blueprint wrap (interactive) */
#company .bp-wrap {
position: relative;
width: min(560px, 100%);
height: 520px;
isolation: isolate;
outline: none;
--mx: 0;
--my: 0;
--sweepX: 50%;
--sweepY: 50%;
}
/* Subtle idle breathing (can be paused on hover by JS) */
#company .bp-wrap[data-bp-idle="1"] .bp-front {
animation: bpBreath 6.5s ease-in-out infinite;
}
@keyframes bpBreath {
0%, 100% { transform: rotateX(0deg) rotateY(0deg) translateY(0px) scale(1); }
50% { transform: rotateX(1.2deg) rotateY(-1.8deg) translateY(-2px) scale(1.005); }
}
#company .bp-card {
position: absolute;
inset: 0;
border-radius: 22px;
overflow: hidden;
transform-origin: 50% 65%;
transition: transform 900ms cubic-bezier(0.16, 1, 0.3, 1),
opacity 900ms cubic-bezier(0.16, 1, 0.3, 1);
will-change: transform;
}
#company .bp-card.bp-back {
transform: rotate(-7deg) translate(-18px, 10px) scale(0.98);
opacity: 0.55;
z-index: 1;
filter: saturate(0.9);
}
#company .bp-card.bp-mid {
transform: rotate(4deg) translate(16px, 26px) scale(0.985);
opacity: 0.75;
z-index: 2;
}
#company .bp-card.bp-front {
transform: rotateX(0deg) rotateY(0deg) translateY(0px) scale(1);
opacity: 1;
z-index: 3;
will-change: transform;
}
/* Trace overlay */
#company .co-trace {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 4;
opacity: 0.9;
filter: drop-shadow(0 10px 18px rgba(0,0,0,0.35));
}
/* NEW: hover glow + sheen sweep on the FRONT card only */
#company .bp-front .bp-sheen {
position: absolute;
inset: -35%;
pointer-events: none;
opacity: 0;
transition: opacity 450ms cubic-bezier(0.16, 1, 0.3, 1);
background:
radial-gradient(600px 420px at var(--sweepX) var(--sweepY), rgba(255,255,255,0.20), transparent 55%),
radial-gradient(420px 260px at calc(var(--sweepX) + 10%) calc(var(--sweepY) + 8%), rgba(255,255,255,0.12), transparent 60%),
linear-gradient(115deg, transparent 35%, rgba(255,255,255,0.14), transparent 65%);
mix-blend-mode: soft-light;
filter: blur(0.2px);
}
#company .bp-front .bp-edge {
position: absolute;
inset: 0;
pointer-events: none;
opacity: 0.0;
transition: opacity 450ms cubic-bezier(0.16, 1, 0.3, 1);
background:
linear-gradient(180deg, rgba(255,255,255,0.35), transparent 30%),
linear-gradient(90deg, rgba(255,255,255,0.20), transparent 35%),
linear-gradient(270deg, rgba(255,255,255,0.12), transparent 40%),
linear-gradient(0deg, rgba(255,255,255,0.12), transparent 35%);
mix-blend-mode: overlay;
}
#company .bp-front .bp-stars {
position: absolute;
inset: 0;
pointer-events: none;
opacity: 0;
transition: opacity 450ms cubic-bezier(0.16, 1, 0.3, 1);
background-image:
radial-gradient(circle at 18% 22%, rgba(255,255,255,0.55) 0px, transparent 2px),
radial-gradient(circle at 82% 28%, rgba(255,255,255,0.45) 0px, transparent 2px),
radial-gradient(circle at 68% 72%, rgba(255,255,255,0.35) 0px, transparent 2px),
radial-gradient(circle at 30% 78%, rgba(255,255,255,0.40) 0px, transparent 2px);
filter: blur(0.2px);
mix-blend-mode: soft-light;
}
#company .bp-wrap.is-hovering .bp-front .bp-sheen,
#company .bp-wrap.is-hovering .bp-front .bp-edge,
#company .bp-wrap.is-hovering .bp-front .bp-stars {
opacity: 1;
}
/* Slight lift + sharper shadow on hover */
#company .bp-wrap.is-hovering .bp-front {
filter: drop-shadow(0 26px 60px rgba(0,0,0,0.55));
}
/* Focus ring */
#company .bp-wrap:focus-visible {
box-shadow: 0 0 0 2px rgba(255,255,255,0.22), 0 0 0 10px rgba(255,255,255,0.06);
border-radius: 26px;
}
</style>
<!-- Background atmosphere -->
<div class="absolute inset-0 pointer-events-none">
<div class="co-halo"></div>
<div class="co-grid"></div>
<div class="absolute inset-0" style="background: radial-gradient(ellipse 70% 55% at 50% 15%, rgba(255,255,255,0.06), transparent 60%);"></div>
</div>
<div class="max-w-7xl mx-auto relative z-10">
<!-- Header -->
<div class="mb-16 md:mb-20 grid grid-cols-1 md:grid-cols-12 gap-10 items-end">
<div class="md:col-span-7" data-co-reveal="">
<div class="flex items-center gap-3 mb-5">
<span class="co-chip font-mono text-[10px] px-3 py-1 rounded-full text-white/60 tracking-widest uppercase">
Company
</span>
<div class="h-px flex-1 bg-white/10"></div>
<span class="font-mono text-[10px] text-white/35 tracking-widest uppercase">
blueprint edition
</span>
</div>
<h2 class="text-4xl md:text-6xl font-display font-bold text-white tracking-tight leading-[0.95]">
Built for
<span class="font-serif italic text-white/60">operators</span>
, designed for
<span class="font-serif italic text-white/60">builders</span>
.
</h2>
<p class="text-neutral-400 text-sm md:text-base mt-5 max-w-2xl leading-relaxed">
Nexus is the calm layer under your infrastructure. Less DevOps
noise, more predictable shipping. A platform that behaves like a
system, not a dashboard.
</p>
</div>
<div class="md:col-span-5 md:justify-self-end" data-co-reveal="">
<div class="flex flex-wrap justify-start md:justify-end gap-3">
<span class="co-chip px-3 py-2 rounded-xl text-white/70 text-xs">
Orchestration
<span class="text-white/30 ml-2 font-mono text-[10px]">01</span>
</span>
<span class="co-chip px-3 py-2 rounded-xl text-white/70 text-xs">
Scaling
<span class="text-white/30 ml-2 font-mono text-[10px]">02</span>
</span>
<span class="co-chip px-3 py-2 rounded-xl text-white/70 text-xs">
Security
<span class="text-white/30 ml-2 font-mono text-[10px]">03</span>
</span>
</div>
</div>
</div>
<!-- Body -->
<div class="grid grid-cols-1 lg:grid-cols-12 gap-10 lg:gap-14 items-start">
<!-- LEFT: Blueprint stack -->
<div class="lg:col-span-7" data-co-reveal="">
<div class="bp-wrap" tabindex="0" aria-label="Nexus company blueprint" data-bp-idle="1" style="--sweepX: 50%; --sweepY: 50%;">
<!-- Trace overlay -->
<svg class="co-trace" viewBox="0 0 1200 900" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M140 740 C260 650, 320 620, 420 560 C560 470, 690 470, 820 420 C980 360, 1040 280, 1080 170" stroke="rgba(255,255,255,0.14)" stroke-width="2" stroke-linecap="round"></path>
<path d="M140 740 C260 650, 320 620, 420 560 C560 470, 690 470, 820 420 C980 360, 1040 280, 1080 170" stroke="rgba(255,255,255,0.06)" stroke-width="10" stroke-linecap="round"></path>
<circle cx="140" cy="740" r="7" fill="rgba(255,255,255,0.20)"></circle>
<circle cx="1080" cy="170" r="7" fill="rgba(255,255,255,0.18)"></circle>
</svg>
<!-- Back -->
<div class="bp-card bp-back co-tile">
<div class="absolute inset-0 opacity-40" style="background-image: radial-gradient(circle at center, rgba(255,255,255,0.07) 1px, transparent 1px); background-size: 22px 22px;"></div>
<div class="relative p-8 h-full flex flex-col justify-between">
<div class="flex items-start justify-between">
<div>
<div class="font-mono text-[10px] tracking-widest uppercase text-white/55">
SYSTEM LAYER
</div>
<div class="text-white/85 font-semibold mt-2">
Base topology
</div>
</div>
<div class="font-mono text-[10px] text-white/35 uppercase tracking-widest">
v1.0
</div>
</div>
<div class="grid grid-cols-2 gap-4">
<div class="rounded-xl border border-white/10 bg-white/5 p-4">
<div class="text-[10px] font-mono uppercase tracking-widest text-white/45">
regions
</div>
<div class="text-white text-lg font-display font-bold mt-2">
multi
</div>
</div>
<div class="rounded-xl border border-white/10 bg-white/5 p-4">
<div class="text-[10px] font-mono uppercase tracking-widest text-white/45">
deploy
</div>
<div class="text-white text-lg font-display font-bold mt-2">
atomic
</div>
</div>
</div>
</div>
</div>
<!-- Mid -->
<div class="bp-card bp-mid co-tile">
<div class="absolute inset-0 opacity-30" style="background: radial-gradient(ellipse 70% 55% at 50% 20%, rgba(255,255,255,0.10), transparent 60%);"></div>
<div class="relative p-8 h-full flex flex-col justify-between">
<div class="flex items-center justify-between gap-6">
<div class="flex items-center gap-3">
<span class="co-chip font-mono text-[10px] px-3 py-1 rounded-full text-white/60 tracking-widest uppercase">
doctrine
</span>
<div class="text-[10px] font-mono uppercase tracking-widest text-white/35">
invisible infra
</div>
</div>
<div class="flex items-center gap-2 text-white/35">
<iconify-icon icon="solar:shield-check-linear" width="18"></iconify-icon>
<iconify-icon icon="solar:server-square-linear" width="18"></iconify-icon>
<iconify-icon icon="solar:globe-linear" width="18"></iconify-icon>
</div>
</div>
<div class="rounded-2xl border border-white/10 bg-black/20 p-6">
<p class="text-sm font-serif italic text-white/80 leading-relaxed">
"Infrastructure should be invisible. Focus on the code, we
handle the rest."
</p>
<div class="mt-5 flex items-center gap-3">
<div class="h-px flex-1 bg-white/10"></div>
<div class="font-mono text-[10px] uppercase tracking-widest text-white/35">
principle
</div>
</div>
</div>
</div>
</div>
<!-- Front -->
<div class="bp-card bp-front bg-[#e0e0e0] rounded-2xl shadow-[10px_10px_30px_rgba(0,0,0,0.50)] overflow-hidden border border-black/10">
<div class="absolute inset-0 bg-cover grayscale mix-blend-multiply opacity-55 bg-center" style="background-image:url(https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/6996ec61-1af0-4762-af12-ce86d8c1dff4_800w.jpg);"></div>
<!-- NEW: premium hover layers -->
<div class="bp-sheen"></div>
<div class="bp-edge"></div>
<div class="bp-stars"></div>
<div class="relative p-8 h-full flex flex-col justify-between">
<div class="flex items-start justify-between gap-6">
<span class="text-black font-bold tracking-widest text-[10px] border border-black/30 px-2 py-1 rounded-full uppercase">
Company
</span>
<div class="text-black/60 font-mono text-[10px] uppercase tracking-widest">
NEXUS / FILE 07
</div>
</div>
<div>
<h3 class="text-black text-5xl md:text-6xl font-display font-bold leading-[0.9] tracking-tighter">
THE
<br>
NEXUS
</h3>
<div class="mt-5 flex items-center gap-3">
<div class="h-px flex-1 bg-black/20"></div>
<div class="text-black/60 font-mono text-[10px] uppercase tracking-widest">
read the manifesto
</div>
<iconify-icon icon="solar:arrow-right-linear" class="text-black/70"></iconify-icon>
</div>
<div class="mt-6 grid grid-cols-3 gap-3">
<div class="rounded-xl border border-black/10 bg-white/40 px-3 py-3">
<div class="text-[10px] font-mono uppercase tracking-widest text-black/60">
signal
</div>
<div class="text-black font-bold mt-1">calm</div>
</div>
<div class="rounded-xl border border-black/10 bg-white/40 px-3 py-3">
<div class="text-[10px] font-mono uppercase tracking-widest text-black/60">
ops
</div>
<div class="text-black font-bold mt-1">clean</div>
</div>
<div class="rounded-xl border border-black/10 bg-white/40 px-3 py-3">
<div class="text-[10px] font-mono uppercase tracking-widest text-black/60">
ship
</div>
<div class="text-black font-bold mt-1">fast</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- RIGHT: editorial rail -->
<div class="lg:col-span-5" data-co-reveal="">
<div class="co-tile rounded-2xl p-7 md:p-8">
<div class="flex items-start justify-between gap-6">
<div>
<div class="font-mono text-[10px] uppercase tracking-widest text-white/40">
Operators
</div>
<h3 class="text-2xl md:text-3xl font-display font-bold text-white mt-2 leading-tight">
A platform that stays predictable under load.
</h3>
</div>
<div class="co-chip rounded-xl px-3 py-2 text-white/70 text-xs">
Built for teams
<span class="text-white/30 ml-2 font-mono text-[10px]">
PRO
</span>
</div>
</div>
<div class="mt-6 space-y-5">
<p class="text-neutral-300 text-sm md:text-base leading-relaxed">
Nexus empowers engineering teams to ship faster with a
rock-solid foundation modern apps are built on. No noisy
controls. Just stable behavior.
</p>
<p class="text-neutral-400 text-sm leading-relaxed">
Eliminate DevOps complexity. We handle orchestration, scaling,
and security so your team stays focused on product.
</p>
</div>
<div class="mt-8 co-runway rounded-2xl p-5">
<div class="grid grid-cols-3 gap-6" id="stats-container">
<div>
<span class="block text-3xl font-display font-bold text-white number-ticker" data-target="99.9" data-suffix="%">
99.9%
</span>
<span class="text-[10px] text-neutral-400 uppercase tracking-widest">
Uptime SLA
</span>
</div>
<div>
<span class="block text-3xl font-display font-bold text-white number-ticker" data-target="10" data-suffix="k+">
10k+
</span>
<span class="text-[10px] text-neutral-400 uppercase tracking-widest">
Teams
</span>
</div>
<div>
<span class="block text-3xl font-display font-bold text-white number-ticker" data-target="24" data-suffix="/7">
24/7
</span>
<span class="text-[10px] text-neutral-400 uppercase tracking-widest">
Support
</span>
</div>
</div>
</div>
<div class="mt-7 flex items-center gap-3">
<span class="co-chip font-mono text-[10px] px-3 py-1 rounded-full text-white/60 tracking-widest uppercase">
ship signal
</span>
<div class="h-px flex-1 bg-white/10"></div>
<span class="font-mono text-[10px] text-white/35 tracking-widest uppercase">
system over UI
</span>
</div>
</div>
</div>
</div>
</div>
<!-- Bottom border -->
<div class="absolute bottom-0 left-0 right-0 pointer-events-none">
<div class="absolute bottom-0 left-1/2 -translate-x-1/2 opacity-25 w-[60%] h-8" style="background: radial-gradient(ellipse 80% 100% at 50% 100%, rgba(255,255,255,0.35) 0%, rgba(255,255,255,0.18) 30%, transparent 70%);"></div>
<div class="h-px bg-white/10 w-full"></div>
</div>
<script>
(function () {
const section = document.getElementById("company");
if (!section) return;
// Reveal
const revealEls = Array.from(section.querySelectorAll("[data-co-reveal]"));
const rObs = new IntersectionObserver(
(entries) => {
entries.forEach((e) => {
if (e.isIntersecting) {
e.target.classList.add("is-visible");
rObs.unobserve(e.target);
}
});
},
{ threshold: 0.18 }
);
revealEls.forEach((el) => rObs.observe(el));
// Number tickers
const tickers = section.querySelectorAll(".number-ticker");
const startCounting = () => {
tickers.forEach((ticker) => {
const target = parseFloat(ticker.getAttribute("data-target"));
const suffix = ticker.getAttribute("data-suffix") || "";
const duration = 2000;
const frameDuration = 1000 / 60;
const totalFrames = Math.round(duration / frameDuration);
let frame = 0;
const easeOutExpo = (t) => (t === 1 ? 1 : 1 - Math.pow(2, -10 * t));
const counter = setInterval(() => {
frame++;
const progress = easeOutExpo(frame / totalFrames);
const current = target * progress;
if (Number.isInteger(target)) {
ticker.textContent = Math.floor(current) + suffix;
} else {
ticker.textContent = current.toFixed(1) + suffix;
}
if (frame === totalFrames) {
clearInterval(counter);
ticker.textContent = target + suffix;
}
}, frameDuration);
});
};
const statObserver = new IntersectionObserver(
(entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
startCounting();
statObserver.unobserve(entry.target);
}
});
},
{ threshold: 0.3 }
);
statObserver.observe(section);
/* =====================================================
NEW: Premium hover effect on blueprint stack
- smooth parallax tilt
- sheen follows cursor
- layers separate slightly
====================================================== */
const bpWrap = section.querySelector(".bp-wrap");
const bpFront = section.querySelector(".bp-front");
const bpMid = section.querySelector(".bp-mid");
const bpBack = section.querySelector(".bp-back");
if (bpWrap && bpFront && bpMid && bpBack) {
let mx = 0, my = 0;
let tx = 0, ty = 0;
const lerp = (a, b, n) => a + (b - a) * n;
const setFromEvent = (e) => {
const rect = bpWrap.getBoundingClientRect();
const x = (e.clientX - rect.left) / rect.width;
const y = (e.clientY - rect.top) / rect.height;
mx = (x - 0.5);
my = (y - 0.5);
const sweepX = Math.max(0, Math.min(100, x * 100));
const sweepY = Math.max(0, Math.min(100, y * 100));
bpWrap.style.setProperty("--sweepX", sweepX + "%");
bpWrap.style.setProperty("--sweepY", sweepY + "%");
};
const onEnter = () => {
bpWrap.classList.add("is-hovering");
bpWrap.setAttribute("data-bp-idle", "0");
};
const onLeave = () => {
bpWrap.classList.remove("is-hovering");
bpWrap.setAttribute("data-bp-idle", "1");
mx = 0; my = 0;
bpWrap.style.setProperty("--sweepX", "50%");
bpWrap.style.setProperty("--sweepY", "50%");
};
bpWrap.addEventListener("mouseenter", onEnter);
bpWrap.addEventListener("mousemove", setFromEvent);
bpWrap.addEventListener("mouseleave", onLeave);
// Keyboard focus should also enable a calm version
bpWrap.addEventListener("focus", () => {
bpWrap.classList.add("is-hovering");
bpWrap.setAttribute("data-bp-idle", "0");
});
bpWrap.addEventListener("blur", () => {
bpWrap.classList.remove("is-hovering");
bpWrap.setAttribute("data-bp-idle", "1");
mx = 0; my = 0;
bpWrap.style.setProperty("--sweepX", "50%");
bpWrap.style.setProperty("--sweepY", "50%");
});
const animate = () => {
tx = lerp(tx, mx, 0.06);
ty = lerp(ty, my, 0.06);
const rX = ty * 9; // tilt X
const rY = tx * 14; // tilt Y
// front: true 3D tilt
bpFront.style.transform =
`perspective(900px) rotateX(${rX}deg) rotateY(${rY}deg) translateY(-3px) scale(1.01)`;
// mid/back: "separation" with light drift
bpMid.style.transform =
`rotate(${4 + rY * 0.18}deg) translate(${16 + rY * 1.2}px, ${26 + rX * 1.0}px) scale(0.985)`;
bpBack.style.transform =
`rotate(${-7 + rY * 0.14}deg) translate(${-18 + rY * 1.0}px, ${10 + rX * 0.85}px) scale(0.98)`;
requestAnimationFrame(animate);
};
animate();
}
})();
</script>
</section>
<section id="pricing" class="relative overflow-hidden bg-black pt-32 pb-32">
<!-- Dynamic Background Grid -->
<div class="absolute inset-0 pointer-events-none">
<div class="absolute inset-0 opacity-[0.15]" style="background-image: linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px); background-size: 50px 50px; mask-image: radial-gradient(ellipse at center, black 40%, transparent 80%);">
</div>
<div class="absolute top-0 left-1/2 -translate-x-1/2 w-[800px] h-[500px] bg-blue-900/20 blur-[120px] rounded-full mix-blend-screen pointer-events-none">
</div>
</div>
<div class="max-w-7xl mx-auto px-6 relative z-10">
<!-- Header -->
<div class="text-center mb-20 pricing-reveal">
<h2 class="text-4xl md:text-5xl font-display font-bold text-white tracking-tight">
Transparent
<span class="font-serif italic text-white/50">Pricing</span>
</h2>
<p class="text-neutral-400 mt-4 max-w-lg mx-auto text-sm">
Predictable costs for every stage of growth. No hidden meters.
</p>
</div>
<!-- Pricing Layout -->
<div class="grid grid-cols-1 lg:grid-cols-12 gap-8 items-stretch min-h-[500px]">
<!-- LEFT: Control Rail (Desktop) / Tabs (Mobile) -->
<div class="lg:col-span-3 flex flex-col justify-center pricing-reveal">
<div class="relative flex lg:flex-col justify-between lg:justify-center gap-2 lg:gap-8 bg-neutral-900/50 lg:bg-transparent p-1 lg:p-0 rounded-xl lg:rounded-none border border-white/10 lg:border-none backdrop-blur-md lg:backdrop-blur-none">
<!-- The Beam (Active Indicator) -->
<div id="pricing-beam" class="absolute bg-blue-500 shadow-[0_0_20px_rgba(59,130,246,0.6)] transition-all duration-500 ease-out z-0 rounded-full lg:w-0.5 lg:h-12 lg:left-0 top-0 left-0 h-full w-1/3 lg:translate-y-0 opacity-0 lg:opacity-100 hidden lg:block" style="top: 88px;">
</div>
<!-- Mobile Indicator pill -->
<div id="pricing-pill" class="absolute bg-white/10 border border-white/10 rounded-lg inset-y-1 w-[32%] transition-all duration-300 ease-out lg:hidden z-0 left-1" style="left: 34%;">
</div>
<!-- Control Nodes -->
<button class="pricing-node group relative z-10 flex items-center gap-4 text-left py-2 px-3 lg:pl-6 transition-all outline-none" data-index="0">
<div class="hidden lg:block w-1.5 h-1.5 rounded-full bg-white/20 group-hover:bg-white/60 transition-colors duration-300 node-dot"></div>
<div>
<div class="text-sm font-bold text-white group-hover:text-blue-400 transition-colors">
Core
</div>
<div class="hidden lg:block text-[10px] text-neutral-500 font-mono uppercase tracking-widest mt-0.5">
Early Stage
</div>
</div>
</button>
<button class="pricing-node group relative z-10 flex items-center gap-4 text-left py-2 px-3 lg:pl-6 transition-all outline-none" data-index="1">
<div class="hidden lg:block w-1.5 h-1.5 rounded-full group-hover:bg-white/60 transition-colors duration-300 node-dot bg-blue-500 shadow-[0_0_10px_#3b82f6]"></div>
<div>
<div class="text-sm font-bold group-hover:text-blue-400 transition-colors text-blue-400">
Scale
</div>
<div class="hidden lg:block text-[10px] text-neutral-500 font-mono uppercase tracking-widest mt-0.5">
Growth
</div>
</div>
</button>
<button class="pricing-node group relative z-10 flex items-center gap-4 text-left py-2 px-3 lg:pl-6 transition-all outline-none" data-index="2">
<div class="hidden lg:block w-1.5 h-1.5 rounded-full bg-white/20 group-hover:bg-white/60 transition-colors duration-300 node-dot"></div>
<div>
<div class="text-sm font-bold text-white group-hover:text-blue-400 transition-colors">
Enterprise
</div>
<div class="hidden lg:block text-[10px] text-neutral-500 font-mono uppercase tracking-widest mt-0.5">
Mission Critical
</div>
</div>
</button>
</div>
</div>
<!-- CENTER: Active Plan Panel -->
<div class="lg:col-span-6 pricing-reveal">
<div id="plan-panel" class="relative h-full bg-white/5 border border-white/10 rounded-3xl p-8 md:p-10 flex flex-col justify-between overflow-hidden group">
<!-- Specular Sweep -->
<div class="absolute inset-0 translate-x-[-150%] skew-x-[-20deg] bg-gradient-to-r from-transparent via-white/5 to-transparent z-0 pointer-events-none animate-specular">
</div>
<!-- Content Container -->
<div class="relative z-10 flex flex-col h-full">
<div id="panel-header" class="mb-8">
<div class="flex items-center justify-between mb-4">
<span id="plan-badge" class="px-3 py-1 rounded-full border border-blue-500/30 bg-blue-500/10 text-blue-400 text-[10px] font-mono uppercase tracking-widest">Most Popular</span>
<div class="flex gap-1">
<div class="w-1 h-1 rounded-full bg-white/20"></div>
<div class="w-1 h-1 rounded-full bg-white/20"></div>
<div class="w-1 h-1 rounded-full bg-white/20"></div>
</div>
</div>
<h3 id="plan-title" class="text-3xl font-display font-bold text-white mb-2">Scale</h3>
<p id="plan-desc" class="text-neutral-400 text-sm leading-relaxed">For high-growth teams that need power, flexibility, and global reach.</p>
</div>
<div class="mt-auto">
<div class="flex items-baseline gap-1 mb-8">
<span class="text-4xl md:text-5xl font-display font-bold text-white">
$
</span>
<span id="plan-price" class="text-4xl md:text-5xl font-display font-bold text-white">99</span>
<span class="text-neutral-500 ml-2">/mo</span>
</div>
<button class="w-full py-4 rounded-xl bg-white text-black font-semibold hover:bg-neutral-200 transition-all duration-300 hover:scale-[1.02] active:scale-[0.98] shadow-[0_0_30px_rgba(255,255,255,0.15)] flex items-center justify-center gap-2 group/btn">
Start 14-day trial
<iconify-icon icon="solar:arrow-right-linear" class="group-hover/btn:translate-x-1 transition-transform"></iconify-icon>
</button>
<div class="text-center mt-4">
<a href="#" class="text-[10px] text-neutral-500 uppercase tracking-widest hover:text-white transition-colors border-b border-transparent hover:border-neutral-500 pb-0.5">
Compare all features
</a>
</div>
</div>
</div>
</div>
</div>
<!-- RIGHT: Value Stack -->
<div class="lg:col-span-3 flex flex-col justify-center gap-4 pricing-reveal">
<div class="text-[10px] font-mono uppercase tracking-widest text-neutral-500 mb-2 pl-2">
Includes
</div>
<div id="value-stack" class="flex flex-col gap-3"><div class="px-4 py-3 rounded-lg border border-white/5 bg-white/[0.02] backdrop-blur-sm text-sm text-neutral-300 flex items-center gap-3 opacity-0 translate-y-2" style="top: 88px;"><iconify-icon icon="solar:check-circle-linear" class="text-blue-400"></iconify-icon> 20 Team Members</div><div class="px-4 py-3 rounded-lg border border-white/5 bg-white/[0.02] backdrop-blur-sm text-sm text-neutral-300 flex items-center gap-3 opacity-0 translate-y-2" style="top: 88px;"><iconify-icon icon="solar:check-circle-linear" class="text-blue-400"></iconify-icon> Global Edge CDN</div><div class="px-4 py-3 rounded-lg border border-white/5 bg-white/[0.02] backdrop-blur-sm text-sm text-neutral-300 flex items-center gap-3 opacity-0 translate-y-2" style="top: 88px;"><iconify-icon icon="solar:check-circle-linear" class="text-blue-400"></iconify-icon> Priority Email Support</div><div class="px-4 py-3 rounded-lg border border-white/5 bg-white/[0.02] backdrop-blur-sm text-sm text-neutral-300 flex items-center gap-3 opacity-0 translate-y-2" style="top: 88px;"><iconify-icon icon="solar:check-circle-linear" class="text-blue-400"></iconify-icon> 30-day Log Retention</div><div class="px-4 py-3 rounded-lg border border-white/5 bg-white/[0.02] backdrop-blur-sm text-sm text-neutral-300 flex items-center gap-3 opacity-0 translate-y-2" style="top: 88px;"><iconify-icon icon="solar:check-circle-linear" class="text-blue-400"></iconify-icon> DDoS Protection</div></div>
</div>
</div>
</div>
<style>
@keyframes specular {
0% {
transform: translateX(-150%) skewX(-20deg);
}
15% {
transform: translateX(150%) skewX(-20deg);
}
100% {
transform: translateX(150%) skewX(-20deg);
}
}
.animate-specular {
animation: specular 6s ease-in-out infinite;
}
</style>
<script>
document.addEventListener("DOMContentLoaded", () => {
gsap.registerPlugin(ScrollTrigger);
const plans = [
{
name: "Core",
desc: "For early teams shipping fast. Everything you need to go from zero to one.",
price: 29,
badge: "Starter Kit",
features: ["5 Team Members", "Unlimited Repos", "Community Support", "7-day Log Retention"]
},
{
name: "Scale",
desc: "For high-growth teams that need power, flexibility, and global reach.",
price: 99,
badge: "Most Popular",
features: ["20 Team Members", "Global Edge CDN", "Priority Email Support", "30-day Log Retention", "DDoS Protection"]
},
{
name: "Enterprise",
desc: "Mission critical infrastructure with advanced security and compliance.",
price: 499,
badge: "Custom Power",
features: ["Unlimited Seats", "SAML / SSO", "Dedicated Success Mgr", "99.99% SLA", "Audit Logs"]
}
];
const nodes = document.querySelectorAll('.pricing-node');
const beam = document.getElementById('pricing-beam');
const pill = document.getElementById('pricing-pill');
const pTitle = document.getElementById('plan-title');
const pDesc = document.getElementById('plan-desc');
const pPrice = document.getElementById('plan-price');
const pBadge = document.getElementById('plan-badge');
const vStack = document.getElementById('value-stack');
const panel = document.getElementById('plan-panel');
let activeIndex = 1; // Start with Scale
// Initial Reveal
const revealTl = gsap.timeline({
scrollTrigger: {
trigger: "#pricing",
start: "top 75%",
}
});
revealTl
.from(".pricing-reveal", {
y: 40,
opacity: 0,
duration: 0.8,
stagger: 0.15,
ease: "power3.out"
})
.from(panel, {
scale: 0.95,
opacity: 0,
duration: 1,
ease: "expo.out"
}, "-=0.6");
function renderStack(features) {
vStack.innerHTML = '';
features.forEach((feat, i) => {
const chip = document.createElement('div');
chip.className = "px-4 py-3 rounded-lg border border-white/5 bg-white/[0.02] backdrop-blur-sm text-sm text-neutral-300 flex items-center gap-3 opacity-0 translate-y-2";
chip.innerHTML = `<iconify-icon icon="solar:check-circle-linear" class="text-blue-400"></iconify-icon> ${feat}`;
vStack.appendChild(chip);
gsap.to(chip, {
opacity: 1,
y: 0,
duration: 0.4,
delay: i * 0.05,
ease: "back.out(1.5)"
});
});
}
function updatePlan(index) {
if (index < 0 || index >= plans.length) return;
activeIndex = index;
const data = plans[index];
// Update UI Active States
nodes.forEach((n, i) => {
const dot = n.querySelector('.node-dot');
const text = n.querySelector('.text-sm');
if (i === index) {
dot && dot.classList.add('bg-blue-500', 'shadow-[0_0_10px_#3b82f6]');
dot && dot.classList.remove('bg-white/20');
text.classList.add('text-blue-400');
text.classList.remove('text-white');
} else {
dot && dot.classList.remove('bg-blue-500', 'shadow-[0_0_10px_#3b82f6]');
dot && dot.classList.add('bg-white/20');
text.classList.remove('text-blue-400');
text.classList.add('text-white');
}
});
// Move Beam (Desktop)
const activeNode = nodes[index];
const railRect = activeNode.parentElement.getBoundingClientRect();
const nodeRect = activeNode.getBoundingClientRect();
// Vertical calculation activeNode.offsetTop is reliable inside relative parent
gsap.to(beam, {
top: activeNode.offsetTop + (activeNode.offsetHeight / 2) - 24, // Center the 48px beam
duration: 0.6,
ease: "elastic.out(1, 0.75)"
});
// Move Pill (Mobile)
// Simple percentage based calc for 3 items
const pillLeft = ["1%", "34%", "67%"];
gsap.to(pill, {
left: pillLeft[index],
duration: 0.4,
ease: "power2.out"
});
// Animate Panel Content Swap
const contentElements = [pTitle, pDesc, pBadge];
gsap.to(contentElements, {
opacity: 0,
y: -5,
duration: 0.2,
onComplete: () => {
pTitle.innerText = data.name;
pDesc.innerText = data.desc;
pBadge.innerText = data.badge;
gsap.to(contentElements, {
opacity: 1,
y: 0,
duration: 0.4,
ease: "power2.out"
});
}
});
// Price Count Up
gsap.to(pPrice, {
textContent: data.price,
duration: 0.8,
snap: { textContent: 1 },
ease: "power2.out"
});
// Update Stack
renderStack(data.features);
}
// Interactions
nodes.forEach((node, i) => {
node.addEventListener('click', () => updatePlan(i));
// Hover preview could be added here, but click-to-lock is cleaner for pricing to avoid jumping
});
// Initialize
updatePlan(1); // Set to Middle (Scale) by default
});
</script>
</section>
<!-- ✅ TESTIMONIALS (FIXED + ANIMATED) -->
<section class="min-h-[850px] overflow-hidden flex flex-col select-none bg-black w-full pt-24 pb-24 relative items-center justify-center" tabindex="0" id="testimonials">
<!-- Background Atmosphere -->
<div class="absolute inset-0 pointer-events-none">
<div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[800px] h-[800px] bg-blue-900/10 rounded-full blur-[120px] mix-blend-screen"></div>
<div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-full h-full bg-[radial-gradient(circle_at_center,rgba(255,255,255,0.03)_1px,transparent_1px)] bg-[length:40px_40px] opacity-20"></div>
</div>
<!-- Connection Layer (SVG) -->
<svg id="connection-svg" class="absolute inset-0 w-full h-full pointer-events-none z-20">
<defs>
<linearGradient id="beam-gradient" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color: rgba(59, 130, 246, 0)"></stop>
<stop offset="45%" style="stop-color: rgba(59, 130, 246, 0.85)"></stop>
<stop offset="100%" style="stop-color: rgba(255, 255, 255, 0.75)"></stop>
</linearGradient>
<filter id="glow-beam">
<feGaussianBlur stdDeviation="2.2" result="coloredBlur"></feGaussianBlur>
<feMerge>
<feMergeNode in="coloredBlur"></feMergeNode>
<feMergeNode in="SourceGraphic"></feMergeNode>
</feMerge>
</filter>
</defs>
<path id="connection-base" d="M 1202.18 449.69 C 1124.42 447.22, 1046.66 427.47, 980.00 425.00" stroke="rgba(255,255,255,0.10)" stroke-width="1.25" fill="none" stroke-linecap="round" opacity="0"></path>
<path id="connection-line" d="M 1202.18 449.69 C 1124.42 447.22, 1046.66 427.47, 980.00 425.00" stroke="url(#beam-gradient)" stroke-width="1.75" fill="none" stroke-linecap="round" filter="url(#glow-beam)" opacity="0" style=" stroke-dasharray: 223.673; stroke-dashoffset: 223.673;"></path>
<circle id="connection-dot" r="3" fill="#60a5fa" opacity="0" filter="url(#glow-beam)" cx="963.716064453125" cy="460.36566162109375">
<animate attributeName="r" values="3;5;3" dur="2s" repeatCount="indefinite"></animate>
</circle>
</svg>
<!-- Header -->
<div class="relative z-30 text-center mb-12 md:mb-0 md:absolute md:top-16 md:left-0 md:right-0 pointer-events-none">
<div class="inline-flex items-center gap-2 px-3 py-1 rounded-full border border-white/10 bg-white/5 backdrop-blur-md mb-4">
<span class="relative flex h-2 w-2">
<span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75"></span>
<span class="relative inline-flex rounded-full h-2 w-2 bg-green-500"></span>
</span>
<span class="text-[10px] font-mono uppercase tracking-widest text-neutral-300">
Live Field Data
</span>
</div>
<h2 class="text-3xl md:text-4xl font-display font-bold text-white tracking-tight">
Community
<span class="font-serif italic text-white/50">Signal</span>
</h2>
</div>
<!-- Orbit Field -->
<div id="orbit-field" class="relative w-full max-w-7xl h-[600px] flex items-center justify-center z-30 perspective-1000">
<!-- Spotlight Panel -->
<div id="spotlight-panel" class="relative w-[90%] max-w-md bg-neutral-900/40 backdrop-blur-2xl border border-white/10 rounded-3xl p-8 md:p-10 shadow-[0_0_60px_rgba(0,0,0,0.6)] z-40 transition-all duration-700 hover:border-white/20">
<div class="absolute top-0 left-8 h-[1px] w-20 bg-gradient-to-r from-transparent via-white/20 to-transparent"></div>
<div class="absolute bottom-0 right-8 h-[1px] w-20 bg-gradient-to-r from-transparent via-white/20 to-transparent"></div>
<!-- IMPORTANT: two anchors (left + right) so noodle never goes behind the card -->
<div id="panel-anchor-left" class="absolute top-1/2 -left-1 -translate-y-1/2 w-1.5 h-1.5 bg-blue-500 rounded-full shadow-[0_0_10px_#3b82f6]"></div>
<div id="panel-anchor-right" class="absolute top-1/2 -right-1 -translate-y-1/2 w-1.5 h-1.5 bg-blue-500 rounded-full shadow-[0_0_10px_#3b82f6]"></div>
<div class="flex flex-col h-full justify-between relative">
<div id="spotlight-content" class="transition-opacity duration-250 opacity-100">
<div class="flex items-center gap-4 mb-8">
<div class="relative">
<div class="absolute inset-0 bg-blue-500/20 rounded-full blur-md"></div>
<img id="s-img" src="https://randomuser.me/api/portraits/women/44.jpg" class="relative w-16 h-16 rounded-full object-cover border border-white/10 bg-neutral-800" alt="Profile">
<div id="s-metric" class="absolute -bottom-2 -right-2 bg-neutral-950 border border-white/10 text-white text-[10px] font-bold px-2 py-1 rounded-md shadow-lg whitespace-nowrap">-40% Time</div>
</div>
<div>
<h3 id="s-name" class="text-2xl font-display font-bold text-white">Sarah Chen</h3>
<p id="s-role" class="text-neutral-400 text-xs font-mono uppercase tracking-widest mt-1">CTO, TechFlow</p>
</div>
</div>
<div class="relative">
<iconify-icon icon="solar:quote-up-square-bold" class="text-white/5 absolute -top-4 -left-4" width="64"></iconify-icon>
<p id="s-quote" class="relative text-xl md:text-2xl text-neutral-200 font-light leading-relaxed font-display tracking-wide">We reduced our deployment time by 40% in the first week. It feels like magic.</p>
</div>
</div>
<div class="mt-8 pt-8 border-t border-white/5 flex items-center justify-between text-[10px] font-mono text-neutral-500 uppercase tracking-widest">
<div class="flex items-center gap-2">
<iconify-icon icon="solar:shield-check-bold" class="text-blue-500"></iconify-icon>
<span>Verified User</span>
</div>
<span class="opacity-50">
ID:
<span id="s-id">01</span>
</span>
</div>
</div>
<div id="scan-line" class="absolute top-0 left-0 w-full h-[2px] bg-gradient-to-r from-transparent via-blue-400/50 to-transparent opacity-0 pointer-events-none" style=" top: 100%;"></div>
</div>
<!-- Orbit Container -->
<div id="orbit-container" class="absolute inset-0" aria-hidden="true">
<!-- One button per avatar (no duplicates) -->
<button type="button" data-avatar="0" class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border bg-neutral-900/80 backdrop-blur-md transition-all duration-300 shadow-lg overflow-hidden border-white/20 group-hover:border-blue-400 group-hover:scale-110">
<img src="https://randomuser.me/api/portraits/women/44.jpg" class="w-full h-full rounded-full object-cover opacity-80 transition-opacity grayscale group-hover:grayscale-0 group-hover:opacity-100" alt="Sarah Chen">
</div>
</div>
</button>
<button type="button" data-avatar="1" class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" style="top: 15%; left: 75%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden">
<img src="https://randomuser.me/api/portraits/men/32.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Mark Davis">
</div>
</div>
</button>
<button type="button" data-avatar="2" class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" style="top: 50%; left: 85%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden border-blue-500/70" style="border-color: rgba(59, 130, 246, 0.8);">
<img src="https://randomuser.me/api/portraits/women/65.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Elena Rodriguez">
</div>
</div>
</button>
<button type="button" data-avatar="3" class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" style="top: 80%; left: 70%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden">
<img src="https://randomuser.me/api/portraits/men/86.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="David Kim">
</div>
</div>
</button>
<button type="button" data-avatar="4" class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" style="top: 85%; left: 25%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden">
<img src="https://randomuser.me/api/portraits/men/22.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Alex Morgan">
</div>
</div>
</button>
<button type="button" data-avatar="5" class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" style="top: 55%; left: 10%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden">
<img src="https://randomuser.me/api/portraits/women/28.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Priya Patel">
</div>
</div>
</button>
<button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Sarah Chen" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgb(59, 130, 246);">
<img src="https://randomuser.me/api/portraits/women/44.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Sarah Chen">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Sarah Chen
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button>
<button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Mark Davis" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://randomuser.me/api/portraits/men/32.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Mark Davis">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Mark Davis
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button>
<button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Elena Rodriguez" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://randomuser.me/api/portraits/women/65.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Elena Rodriguez">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Elena Rodriguez
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button>
<button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by David Kim" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://randomuser.me/api/portraits/men/86.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="David Kim">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
David Kim
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button>
<button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Alex Morgan" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://randomuser.me/api/portraits/men/22.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Alex Morgan">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Alex Morgan
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button>
<button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Priya Patel" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://randomuser.me/api/portraits/women/28.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Priya Patel">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Priya Patel
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button>
<button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Sarah Chen" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgb(59, 130, 246);">
<img src="https://randomuser.me/api/portraits/women/44.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Sarah Chen">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Sarah Chen
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button>
<button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Mark Davis" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://randomuser.me/api/portraits/men/32.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Mark Davis">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Mark Davis
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button>
<button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Elena Rodriguez" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://randomuser.me/api/portraits/women/65.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Elena Rodriguez">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Elena Rodriguez
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button>
<button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by David Kim" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://randomuser.me/api/portraits/men/86.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="David Kim">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
David Kim
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button>
<button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Alex Morgan" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://randomuser.me/api/portraits/men/22.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Alex Morgan">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Alex Morgan
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button>
<button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Priya Patel" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://randomuser.me/api/portraits/women/28.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Priya Patel">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Priya Patel
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button>
<button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Sarah Chen" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgb(59, 130, 246);">
<img src="https://randomuser.me/api/portraits/women/44.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Sarah Chen">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Sarah Chen
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button>
<button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Mark Davis" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://randomuser.me/api/portraits/men/32.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Mark Davis">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Mark Davis
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button>
<button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Elena Rodriguez" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://randomuser.me/api/portraits/women/65.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Elena Rodriguez">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Elena Rodriguez
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button>
<button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by David Kim" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://randomuser.me/api/portraits/men/86.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="David Kim">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
David Kim
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button>
<button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Alex Morgan" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://randomuser.me/api/portraits/men/22.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Alex Morgan">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Alex Morgan
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button>
<button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Priya Patel" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://randomuser.me/api/portraits/women/28.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Priya Patel">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Priya Patel
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button>
<button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Sarah Chen" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgb(59, 130, 246);">
<img src="https://randomuser.me/api/portraits/women/44.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Sarah Chen">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Sarah Chen
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button>
<button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Mark Davis" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://randomuser.me/api/portraits/men/32.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Mark Davis">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Mark Davis
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button>
<button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Elena Rodriguez" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://randomuser.me/api/portraits/women/65.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Elena Rodriguez">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Elena Rodriguez
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button>
<button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by David Kim" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://randomuser.me/api/portraits/men/86.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="David Kim">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
David Kim
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button>
<button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Alex Morgan" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://randomuser.me/api/portraits/men/22.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Alex Morgan">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Alex Morgan
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button>
<button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Priya Patel" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://randomuser.me/api/portraits/women/28.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Priya Patel">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Priya Patel
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button>
<button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Sarah Chen" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgb(59, 130, 246);">
<img src="https://randomuser.me/api/portraits/women/44.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Sarah Chen">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Sarah Chen
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button>
<button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Mark Davis" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://randomuser.me/api/portraits/men/32.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Mark Davis">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Mark Davis
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button>
<button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Elena Rodriguez" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://randomuser.me/api/portraits/women/65.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Elena Rodriguez">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Elena Rodriguez
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button>
<button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by David Kim" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://randomuser.me/api/portraits/men/86.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="David Kim">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
David Kim
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button>
<button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Alex Morgan" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://randomuser.me/api/portraits/men/22.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Alex Morgan">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Alex Morgan
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button>
<button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Priya Patel" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://randomuser.me/api/portraits/women/28.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Priya Patel">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Priya Patel
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button>
<button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Sarah Chen" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgb(59, 130, 246);">
<img src="https://randomuser.me/api/portraits/women/44.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Sarah Chen">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Sarah Chen
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button>
<button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Mark Davis" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://randomuser.me/api/portraits/men/32.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Mark Davis">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Mark Davis
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button>
<button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Elena Rodriguez" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://randomuser.me/api/portraits/women/65.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Elena Rodriguez">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Elena Rodriguez
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button>
<button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by David Kim" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://randomuser.me/api/portraits/men/86.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="David Kim">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
David Kim
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button>
<button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Alex Morgan" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://randomuser.me/api/portraits/men/22.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Alex Morgan">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Alex Morgan
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button>
<button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Priya Patel" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://randomuser.me/api/portraits/women/28.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Priya Patel">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Priya Patel
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button>
<button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Sarah Chen" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgb(59, 130, 246);">
<img src="https://randomuser.me/api/portraits/women/44.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Sarah Chen">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Sarah Chen
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button>
<button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Mark Davis" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://randomuser.me/api/portraits/men/32.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Mark Davis">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Mark Davis
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button>
<button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Elena Rodriguez" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://randomuser.me/api/portraits/women/65.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Elena Rodriguez">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Elena Rodriguez
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button>
<button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by David Kim" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://randomuser.me/api/portraits/men/86.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="David Kim">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
David Kim
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button>
<button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Alex Morgan" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://randomuser.me/api/portraits/men/22.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Alex Morgan">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Alex Morgan
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button>
<button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Priya Patel" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://randomuser.me/api/portraits/women/28.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Priya Patel">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Priya Patel
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button>
<button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Sarah Chen" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden">
<img src="https://randomuser.me/api/portraits/women/44.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Sarah Chen">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Sarah Chen
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button>
<button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Mark Davis" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden">
<img src="https://randomuser.me/api/portraits/men/32.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Mark Davis">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Mark Davis
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button>
<button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Elena Rodriguez" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden">
<img src="https://randomuser.me/api/portraits/women/65.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Elena Rodriguez">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Elena Rodriguez
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button>
<button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by David Kim" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden">
<img src="https://randomuser.me/api/portraits/men/86.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="David Kim">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
David Kim
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button>
<button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Alex Morgan" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden">
<img src="https://randomuser.me/api/portraits/men/22.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Alex Morgan">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Alex Morgan
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button>
<button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Priya Patel" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden">
<img src="https://randomuser.me/api/portraits/women/28.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Priya Patel">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Priya Patel
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button>
<button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Sarah Chen" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgb(59, 130, 246);">
<img src="https://randomuser.me/api/portraits/women/44.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Sarah Chen">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Sarah Chen
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button>
<button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Mark Davis" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://randomuser.me/api/portraits/men/32.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Mark Davis">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Mark Davis
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button>
<button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Elena Rodriguez" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://randomuser.me/api/portraits/women/65.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Elena Rodriguez">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Elena Rodriguez
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button>
<button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by David Kim" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://randomuser.me/api/portraits/men/86.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="David Kim">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
David Kim
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button>
<button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Alex Morgan" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://randomuser.me/api/portraits/men/22.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Alex Morgan">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Alex Morgan
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button>
<button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Priya Patel" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://randomuser.me/api/portraits/women/28.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Priya Patel">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Priya Patel
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button>
<button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Sarah Chen" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgb(59, 130, 246);">
<img src="https://randomuser.me/api/portraits/women/44.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Sarah Chen">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Sarah Chen
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button>
<button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Mark Davis" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://randomuser.me/api/portraits/men/32.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Mark Davis">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Mark Davis
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button>
<button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Elena Rodriguez" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://randomuser.me/api/portraits/women/65.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Elena Rodriguez">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Elena Rodriguez
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button>
<button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by David Kim" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://randomuser.me/api/portraits/men/86.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="David Kim">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
David Kim
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button>
<button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Alex Morgan" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://randomuser.me/api/portraits/men/22.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Alex Morgan">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Alex Morgan
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button>
<button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Priya Patel" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://randomuser.me/api/portraits/women/28.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Priya Patel">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Priya Patel
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button>
<button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Sarah Chen" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgb(59, 130, 246);">
<img src="https://randomuser.me/api/portraits/women/44.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Sarah Chen">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Sarah Chen
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button>
<button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Mark Davis" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://randomuser.me/api/portraits/men/32.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Mark Davis">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Mark Davis
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button>
<button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Elena Rodriguez" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://randomuser.me/api/portraits/women/65.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Elena Rodriguez">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Elena Rodriguez
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button>
<button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by David Kim" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://randomuser.me/api/portraits/men/86.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="David Kim">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
David Kim
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button>
<button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Alex Morgan" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://randomuser.me/api/portraits/men/22.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Alex Morgan">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Alex Morgan
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button>
<button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Priya Patel" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://randomuser.me/api/portraits/women/28.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Priya Patel">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Priya Patel
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button>
<button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Sarah Chen" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgb(59, 130, 246);">
<img src="https://randomuser.me/api/portraits/women/44.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Sarah Chen">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Sarah Chen
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button>
<button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Mark Davis" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://randomuser.me/api/portraits/men/32.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Mark Davis">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Mark Davis
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button>
<button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Elena Rodriguez" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://randomuser.me/api/portraits/women/65.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Elena Rodriguez">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Elena Rodriguez
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button>
<button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by David Kim" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://randomuser.me/api/portraits/men/86.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="David Kim">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
David Kim
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button>
<button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Alex Morgan" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://randomuser.me/api/portraits/men/22.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Alex Morgan">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Alex Morgan
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button>
<button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Priya Patel" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://randomuser.me/api/portraits/women/28.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Priya Patel">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Priya Patel
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button>
<button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Sarah Chen" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgb(59, 130, 246);">
<img src="https://randomuser.me/api/portraits/women/44.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Sarah Chen">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Sarah Chen
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button>
<button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Mark Davis" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://randomuser.me/api/portraits/men/32.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Mark Davis">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Mark Davis
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button>
<button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Elena Rodriguez" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://randomuser.me/api/portraits/women/65.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Elena Rodriguez">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Elena Rodriguez
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button>
<button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by David Kim" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://randomuser.me/api/portraits/men/86.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="David Kim">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
David Kim
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button>
<button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Alex Morgan" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://randomuser.me/api/portraits/men/22.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Alex Morgan">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Alex Morgan
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button>
<button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Priya Patel" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://randomuser.me/api/portraits/women/28.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Priya Patel">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Priya Patel
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button>
<button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Sarah Chen" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgb(59, 130, 246);">
<img src="https://randomuser.me/api/portraits/women/44.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Sarah Chen">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Sarah Chen
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button>
<button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Mark Davis" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://randomuser.me/api/portraits/men/32.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Mark Davis">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Mark Davis
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button>
<button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Elena Rodriguez" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://randomuser.me/api/portraits/women/65.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Elena Rodriguez">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Elena Rodriguez
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button>
<button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by David Kim" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://randomuser.me/api/portraits/men/86.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="David Kim">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
David Kim
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button>
<button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Alex Morgan" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://randomuser.me/api/portraits/men/22.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Alex Morgan">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Alex Morgan
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button>
<button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Priya Patel" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://randomuser.me/api/portraits/women/28.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Priya Patel">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Priya Patel
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button>
<button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Sarah Chen" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgb(59, 130, 246);">
<img src="https://randomuser.me/api/portraits/women/44.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Sarah Chen">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Sarah Chen
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button>
<button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Mark Davis" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://randomuser.me/api/portraits/men/32.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Mark Davis">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Mark Davis
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button>
<button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Elena Rodriguez" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://randomuser.me/api/portraits/women/65.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Elena Rodriguez">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Elena Rodriguez
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button>
<button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by David Kim" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://randomuser.me/api/portraits/men/86.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="David Kim">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
David Kim
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button>
<button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Alex Morgan" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://randomuser.me/api/portraits/men/22.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Alex Morgan">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Alex Morgan
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button>
<button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Priya Patel" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://randomuser.me/api/portraits/women/28.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Priya Patel">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Priya Patel
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button>
<button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Sarah Chen" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgb(59, 130, 246);">
<img src="https://randomuser.me/api/portraits/women/44.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Sarah Chen">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Sarah Chen
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button>
<button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Mark Davis" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://randomuser.me/api/portraits/men/32.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Mark Davis">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Mark Davis
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button>
<button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Elena Rodriguez" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://randomuser.me/api/portraits/women/65.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Elena Rodriguez">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Elena Rodriguez
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button>
<button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by David Kim" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://randomuser.me/api/portraits/men/86.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="David Kim">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
David Kim
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button>
<button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Alex Morgan" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://randomuser.me/api/portraits/men/22.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Alex Morgan">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Alex Morgan
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button>
<button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Priya Patel" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://randomuser.me/api/portraits/women/28.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Priya Patel">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Priya Patel
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button>
<button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Sarah Chen" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgb(59, 130, 246);">
<img src="https://randomuser.me/api/portraits/women/44.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Sarah Chen">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Sarah Chen
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button>
<button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Mark Davis" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://randomuser.me/api/portraits/men/32.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Mark Davis">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Mark Davis
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button>
<button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Elena Rodriguez" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://randomuser.me/api/portraits/women/65.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Elena Rodriguez">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Elena Rodriguez
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button>
<button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by David Kim" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://randomuser.me/api/portraits/men/86.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="David Kim">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
David Kim
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button>
<button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Alex Morgan" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://randomuser.me/api/portraits/men/22.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Alex Morgan">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Alex Morgan
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button>
<button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Priya Patel" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://randomuser.me/api/portraits/women/28.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Priya Patel">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Priya Patel
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button>
<button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Sarah Chen" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgb(59, 130, 246);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Sarah Chen">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Sarah Chen
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button>
<button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Mark Davis" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Mark Davis">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Mark Davis
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button>
<button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Elena Rodriguez" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Elena Rodriguez">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Elena Rodriguez
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button>
<button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by David Kim" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="David Kim">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
David Kim
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button>
<button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Alex Morgan" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Alex Morgan">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Alex Morgan
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button>
<button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Priya Patel" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Priya Patel">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Priya Patel
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button>
<button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Sarah Chen" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgb(59, 130, 246);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Sarah Chen">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Sarah Chen
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button>
<button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Mark Davis" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Mark Davis">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Mark Davis
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button>
<button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Elena Rodriguez" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Elena Rodriguez">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Elena Rodriguez
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button>
<button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by David Kim" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="David Kim">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
David Kim
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button>
<button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Alex Morgan" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Alex Morgan">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Alex Morgan
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button>
<button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Priya Patel" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Priya Patel">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Priya Patel
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button>
<button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Sarah Chen" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgb(59, 130, 246);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Sarah Chen">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Sarah Chen
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button>
<button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Mark Davis" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Mark Davis">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Mark Davis
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button>
<button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Elena Rodriguez" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Elena Rodriguez">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Elena Rodriguez
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button>
<button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by David Kim" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="David Kim">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
David Kim
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button>
<button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Alex Morgan" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Alex Morgan">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Alex Morgan
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button>
<button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Priya Patel" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Priya Patel">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Priya Patel
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button>
<button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Sarah Chen" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgb(59, 130, 246);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Sarah Chen">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Sarah Chen
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button>
<button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Mark Davis" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Mark Davis">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Mark Davis
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button>
<button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Elena Rodriguez" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Elena Rodriguez">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Elena Rodriguez
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button>
<button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by David Kim" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="David Kim">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
David Kim
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button>
<button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Alex Morgan" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Alex Morgan">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Alex Morgan
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button>
<button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Priya Patel" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Priya Patel">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Priya Patel
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button>
<button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Sarah Chen" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgb(59, 130, 246);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Sarah Chen">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Sarah Chen
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button>
<button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Mark Davis" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Mark Davis">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Mark Davis
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button>
<button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Elena Rodriguez" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Elena Rodriguez">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Elena Rodriguez
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button>
<button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by David Kim" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="David Kim">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
David Kim
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button>
<button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Alex Morgan" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Alex Morgan">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Alex Morgan
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button>
<button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Priya Patel" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Priya Patel">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Priya Patel
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button>
<button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Sarah Chen" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgb(59, 130, 246);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Sarah Chen">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Sarah Chen
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button>
<button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Mark Davis" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Mark Davis">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Mark Davis
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button>
<button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Elena Rodriguez" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Elena Rodriguez">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Elena Rodriguez
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button>
<button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by David Kim" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="David Kim">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
David Kim
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button>
<button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Alex Morgan" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Alex Morgan">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Alex Morgan
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button>
<button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Priya Patel" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Priya Patel">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Priya Patel
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button>
<button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Sarah Chen" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgb(59, 130, 246);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Sarah Chen">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Sarah Chen
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button>
<button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Mark Davis" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Mark Davis">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Mark Davis
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button>
<button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Elena Rodriguez" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Elena Rodriguez">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Elena Rodriguez
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button>
<button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by David Kim" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="David Kim">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
David Kim
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button>
<button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Alex Morgan" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Alex Morgan">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Alex Morgan
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button>
<button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Priya Patel" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Priya Patel">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Priya Patel
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button>
<button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Sarah Chen" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgb(59, 130, 246);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Sarah Chen">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Sarah Chen
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button>
<button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Mark Davis" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Mark Davis">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Mark Davis
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button>
<button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Elena Rodriguez" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Elena Rodriguez">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Elena Rodriguez
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button>
<button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by David Kim" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="David Kim">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
David Kim
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button>
<button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Alex Morgan" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Alex Morgan">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Alex Morgan
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button>
<button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Priya Patel" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Priya Patel">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Priya Patel
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button>
<button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Sarah Chen" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgb(59, 130, 246);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Sarah Chen">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Sarah Chen
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button>
<button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Mark Davis" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Mark Davis">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Mark Davis
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button>
<button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Elena Rodriguez" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Elena Rodriguez">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Elena Rodriguez
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button>
<button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by David Kim" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="David Kim">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
David Kim
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button>
<button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Alex Morgan" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Alex Morgan">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Alex Morgan
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button>
<button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Priya Patel" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Priya Patel">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Priya Patel
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button>
<button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Sarah Chen" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgb(59, 130, 246);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Sarah Chen">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Sarah Chen
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button>
<button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Mark Davis" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Mark Davis">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Mark Davis
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button>
<button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Elena Rodriguez" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Elena Rodriguez">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Elena Rodriguez
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button>
<button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by David Kim" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="David Kim">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
David Kim
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button>
<button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Alex Morgan" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Alex Morgan">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Alex Morgan
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button>
<button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Priya Patel" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Priya Patel">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Priya Patel
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button>
<button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Sarah Chen" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgb(59, 130, 246);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Sarah Chen">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Sarah Chen
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button>
<button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Mark Davis" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Mark Davis">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Mark Davis
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button>
<button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Elena Rodriguez" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Elena Rodriguez">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Elena Rodriguez
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button>
<button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by David Kim" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="David Kim">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
David Kim
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button>
<button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Alex Morgan" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Alex Morgan">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Alex Morgan
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button>
<button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Priya Patel" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Priya Patel">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Priya Patel
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button>
<button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Sarah Chen" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgb(59, 130, 246);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Sarah Chen">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Sarah Chen
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button>
<button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Mark Davis" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Mark Davis">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Mark Davis
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button>
<button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Elena Rodriguez" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Elena Rodriguez">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Elena Rodriguez
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button>
<button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by David Kim" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="David Kim">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
David Kim
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button>
<button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Alex Morgan" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Alex Morgan">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Alex Morgan
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button>
<button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Priya Patel" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Priya Patel">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Priya Patel
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button>
<button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Sarah Chen" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgb(59, 130, 246);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Sarah Chen">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Sarah Chen
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button>
<button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Mark Davis" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Mark Davis">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Mark Davis
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button>
<button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Elena Rodriguez" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Elena Rodriguez">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Elena Rodriguez
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button>
<button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by David Kim" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="David Kim">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
David Kim
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button>
<button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Alex Morgan" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Alex Morgan">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Alex Morgan
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button>
<button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Priya Patel" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Priya Patel">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Priya Patel
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button>
<button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Sarah Chen" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgb(59, 130, 246);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Sarah Chen">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Sarah Chen
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button>
<button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Mark Davis" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Mark Davis">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Mark Davis
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button>
<button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Elena Rodriguez" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Elena Rodriguez">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Elena Rodriguez
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button>
<button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by David Kim" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="David Kim">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
David Kim
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button>
<button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Alex Morgan" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Alex Morgan">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Alex Morgan
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button>
<button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Priya Patel" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Priya Patel">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Priya Patel
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button>
<button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Sarah Chen" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgb(59, 130, 246);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Sarah Chen">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Sarah Chen
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button>
<button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Mark Davis" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Mark Davis">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Mark Davis
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button>
<button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Elena Rodriguez" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Elena Rodriguez">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Elena Rodriguez
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button>
<button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by David Kim" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="David Kim">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
David Kim
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button>
<button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Alex Morgan" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Alex Morgan">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Alex Morgan
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button>
<button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Priya Patel" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Priya Patel">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Priya Patel
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button>
<button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Sarah Chen" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgb(59, 130, 246);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Sarah Chen">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Sarah Chen
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button>
<button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Mark Davis" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Mark Davis">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Mark Davis
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button>
<button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Elena Rodriguez" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Elena Rodriguez">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Elena Rodriguez
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button>
<button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by David Kim" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="David Kim">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
David Kim
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button>
<button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Alex Morgan" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Alex Morgan">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Alex Morgan
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button>
<button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Priya Patel" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Priya Patel">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Priya Patel
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button>
<button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Sarah Chen" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgb(59, 130, 246);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Sarah Chen">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Sarah Chen
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button>
<button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Mark Davis" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Mark Davis">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Mark Davis
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button>
<button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Elena Rodriguez" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Elena Rodriguez">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Elena Rodriguez
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button>
<button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by David Kim" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="David Kim">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
David Kim
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button>
<button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Alex Morgan" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Alex Morgan">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Alex Morgan
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button>
<button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Priya Patel" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Priya Patel">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Priya Patel
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button>
<button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Sarah Chen" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgb(59, 130, 246);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Sarah Chen">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Sarah Chen
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button>
<button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Mark Davis" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Mark Davis">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Mark Davis
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button>
<button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Elena Rodriguez" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Elena Rodriguez">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Elena Rodriguez
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button>
<button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by David Kim" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="David Kim">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
David Kim
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button>
<button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Alex Morgan" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Alex Morgan">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Alex Morgan
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button>
<button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Priya Patel" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Priya Patel">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Priya Patel
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button>
<button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Sarah Chen" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgb(59, 130, 246);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Sarah Chen">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Sarah Chen
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button>
<button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Mark Davis" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Mark Davis">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Mark Davis
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button>
<button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Elena Rodriguez" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Elena Rodriguez">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Elena Rodriguez
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button>
<button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by David Kim" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="David Kim">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
David Kim
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button>
<button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Alex Morgan" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Alex Morgan">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Alex Morgan
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button>
<button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Priya Patel" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Priya Patel">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Priya Patel
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button>
<button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Sarah Chen" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgb(59, 130, 246);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Sarah Chen">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Sarah Chen
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button>
<button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Mark Davis" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Mark Davis">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Mark Davis
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button>
<button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Elena Rodriguez" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Elena Rodriguez">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Elena Rodriguez
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button>
<button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by David Kim" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="David Kim">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
David Kim
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button>
<button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Alex Morgan" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Alex Morgan">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Alex Morgan
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button>
<button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Priya Patel" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Priya Patel">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Priya Patel
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button>
<button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Sarah Chen" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgb(59, 130, 246);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Sarah Chen">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Sarah Chen
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button>
<button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Mark Davis" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Mark Davis">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Mark Davis
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button>
<button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Elena Rodriguez" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Elena Rodriguez">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Elena Rodriguez
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button>
<button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by David Kim" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="David Kim">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
David Kim
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button>
<button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Alex Morgan" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Alex Morgan">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Alex Morgan
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button>
<button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Priya Patel" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Priya Patel">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Priya Patel
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button>
<button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Sarah Chen" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgb(59, 130, 246);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Sarah Chen">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Sarah Chen
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button><button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Mark Davis" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Mark Davis">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Mark Davis
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button><button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Elena Rodriguez" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Elena Rodriguez">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Elena Rodriguez
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button><button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by David Kim" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="David Kim">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
David Kim
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button><button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Alex Morgan" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Alex Morgan">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Alex Morgan
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button><button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Priya Patel" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Priya Patel">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Priya Patel
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button><button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Sarah Chen" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgb(59, 130, 246);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Sarah Chen">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Sarah Chen
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button><button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Mark Davis" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Mark Davis">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Mark Davis
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button><button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Elena Rodriguez" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Elena Rodriguez">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Elena Rodriguez
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button><button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by David Kim" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="David Kim">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
David Kim
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button><button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Alex Morgan" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Alex Morgan">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Alex Morgan
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button><button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Priya Patel" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Priya Patel">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Priya Patel
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button><button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Sarah Chen" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgb(59, 130, 246);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Sarah Chen">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Sarah Chen
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button><button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Mark Davis" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Mark Davis">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Mark Davis
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button><button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Elena Rodriguez" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Elena Rodriguez">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Elena Rodriguez
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button><button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by David Kim" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="David Kim">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
David Kim
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button><button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Alex Morgan" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Alex Morgan">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Alex Morgan
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button><button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Priya Patel" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Priya Patel">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Priya Patel
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button><button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Sarah Chen" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgb(59, 130, 246);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Sarah Chen">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Sarah Chen
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button><button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Mark Davis" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Mark Davis">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Mark Davis
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button><button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Elena Rodriguez" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Elena Rodriguez">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Elena Rodriguez
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button><button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by David Kim" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="David Kim">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
David Kim
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button><button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Alex Morgan" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Alex Morgan">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Alex Morgan
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button><button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Priya Patel" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Priya Patel">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Priya Patel
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button><button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Sarah Chen" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgb(59, 130, 246);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Sarah Chen">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Sarah Chen
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button><button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Mark Davis" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Mark Davis">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Mark Davis
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button><button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Elena Rodriguez" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Elena Rodriguez">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Elena Rodriguez
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button><button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by David Kim" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="David Kim">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
David Kim
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button><button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Alex Morgan" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Alex Morgan">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Alex Morgan
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button><button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Priya Patel" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Priya Patel">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Priya Patel
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button><button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Sarah Chen" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgb(59, 130, 246);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Sarah Chen">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Sarah Chen
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button><button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Mark Davis" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Mark Davis">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Mark Davis
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button><button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Elena Rodriguez" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Elena Rodriguez">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Elena Rodriguez
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button><button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by David Kim" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="David Kim">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
David Kim
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button><button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Alex Morgan" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Alex Morgan">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Alex Morgan
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button><button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Priya Patel" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Priya Patel">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Priya Patel
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button><button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Sarah Chen" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgb(59, 130, 246);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Sarah Chen">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Sarah Chen
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button><button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Mark Davis" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Mark Davis">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Mark Davis
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button><button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Elena Rodriguez" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Elena Rodriguez">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Elena Rodriguez
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button><button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by David Kim" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="David Kim">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
David Kim
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button><button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Alex Morgan" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Alex Morgan">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Alex Morgan
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button><button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Priya Patel" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Priya Patel">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Priya Patel
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button><button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Sarah Chen" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgb(59, 130, 246);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Sarah Chen">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Sarah Chen
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button><button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Mark Davis" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Mark Davis">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Mark Davis
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button><button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Elena Rodriguez" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Elena Rodriguez">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Elena Rodriguez
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button><button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by David Kim" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="David Kim">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
David Kim
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button><button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Alex Morgan" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Alex Morgan">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Alex Morgan
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button><button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Priya Patel" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Priya Patel">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Priya Patel
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button><button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Sarah Chen" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgb(59, 130, 246);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Sarah Chen">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Sarah Chen
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button><button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Mark Davis" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Mark Davis">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Mark Davis
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button><button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Elena Rodriguez" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Elena Rodriguez">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Elena Rodriguez
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button><button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by David Kim" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="David Kim">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
David Kim
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button><button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Alex Morgan" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Alex Morgan">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Alex Morgan
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button><button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Priya Patel" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Priya Patel">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Priya Patel
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button><button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Sarah Chen" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgb(59, 130, 246);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Sarah Chen">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Sarah Chen
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button><button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Mark Davis" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Mark Davis">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Mark Davis
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button><button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Elena Rodriguez" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Elena Rodriguez">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Elena Rodriguez
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button><button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by David Kim" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="David Kim">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
David Kim
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button><button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Alex Morgan" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Alex Morgan">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Alex Morgan
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button><button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Priya Patel" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Priya Patel">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Priya Patel
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button><button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Sarah Chen" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgb(59, 130, 246);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Sarah Chen">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Sarah Chen
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button><button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Mark Davis" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Mark Davis">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Mark Davis
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button><button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Elena Rodriguez" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Elena Rodriguez">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Elena Rodriguez
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button><button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by David Kim" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="David Kim">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
David Kim
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button><button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Alex Morgan" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Alex Morgan">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Alex Morgan
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button><button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Priya Patel" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Priya Patel">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Priya Patel
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button><button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Sarah Chen" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgb(59, 130, 246);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Sarah Chen">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Sarah Chen
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button><button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Mark Davis" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Mark Davis">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Mark Davis
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button><button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Elena Rodriguez" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Elena Rodriguez">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Elena Rodriguez
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button><button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by David Kim" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="David Kim">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
David Kim
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button><button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Alex Morgan" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Alex Morgan">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Alex Morgan
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button><button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Priya Patel" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Priya Patel">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Priya Patel
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button><button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Sarah Chen" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgb(59, 130, 246);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Sarah Chen">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Sarah Chen
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button><button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Mark Davis" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Mark Davis">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Mark Davis
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button><button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Elena Rodriguez" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Elena Rodriguez">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Elena Rodriguez
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button><button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by David Kim" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="David Kim">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
David Kim
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button><button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Alex Morgan" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Alex Morgan">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Alex Morgan
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button><button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Priya Patel" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Priya Patel">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Priya Patel
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button><button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Sarah Chen" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgb(59, 130, 246);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Sarah Chen">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Sarah Chen
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button><button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Mark Davis" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Mark Davis">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Mark Davis
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button><button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Elena Rodriguez" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Elena Rodriguez">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Elena Rodriguez
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button><button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by David Kim" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="David Kim">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
David Kim
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button><button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Alex Morgan" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Alex Morgan">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Alex Morgan
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button><button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Priya Patel" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Priya Patel">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Priya Patel
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button><button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Sarah Chen" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgb(59, 130, 246);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Sarah Chen">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Sarah Chen
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button><button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Mark Davis" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Mark Davis">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Mark Davis
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button><button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Elena Rodriguez" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Elena Rodriguez">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Elena Rodriguez
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button><button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by David Kim" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="David Kim">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
David Kim
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button><button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Alex Morgan" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Alex Morgan">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Alex Morgan
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button><button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Priya Patel" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Priya Patel">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Priya Patel
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button><button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Sarah Chen" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgb(59, 130, 246);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Sarah Chen">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Sarah Chen
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button><button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Mark Davis" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Mark Davis">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Mark Davis
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button><button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Elena Rodriguez" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Elena Rodriguez">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Elena Rodriguez
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button><button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by David Kim" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="David Kim">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
David Kim
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button><button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Alex Morgan" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Alex Morgan">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Alex Morgan
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button><button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Priya Patel" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Priya Patel">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Priya Patel
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button><button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Sarah Chen" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgb(59, 130, 246);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Sarah Chen">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Sarah Chen
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button><button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Mark Davis" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Mark Davis">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Mark Davis
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button><button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Elena Rodriguez" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Elena Rodriguez">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Elena Rodriguez
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button><button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by David Kim" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="David Kim">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
David Kim
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button><button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Alex Morgan" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Alex Morgan">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Alex Morgan
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button><button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Priya Patel" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Priya Patel">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Priya Patel
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button><button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Sarah Chen" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgb(59, 130, 246);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Sarah Chen">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Sarah Chen
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button><button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Mark Davis" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Mark Davis">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Mark Davis
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button><button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Elena Rodriguez" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Elena Rodriguez">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Elena Rodriguez
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button><button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by David Kim" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="David Kim">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
David Kim
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button><button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Alex Morgan" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Alex Morgan">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Alex Morgan
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button><button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Priya Patel" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Priya Patel">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Priya Patel
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button><button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Sarah Chen" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Sarah Chen">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Sarah Chen
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button><button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Mark Davis" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Mark Davis">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Mark Davis
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button><button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Elena Rodriguez" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Elena Rodriguez">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Elena Rodriguez
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button><button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by David Kim" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="David Kim">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
David Kim
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button><button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Alex Morgan" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Alex Morgan">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Alex Morgan
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button><button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Priya Patel" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Priya Patel">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Priya Patel
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button><button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Sarah Chen" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgb(59, 130, 246);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Sarah Chen">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Sarah Chen
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button><button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Mark Davis" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Mark Davis">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Mark Davis
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button><button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Elena Rodriguez" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Elena Rodriguez">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Elena Rodriguez
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button><button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by David Kim" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="David Kim">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
David Kim
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button><button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Alex Morgan" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Alex Morgan">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Alex Morgan
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button><button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Priya Patel" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Priya Patel">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Priya Patel
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button><button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Sarah Chen" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgb(59, 130, 246);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Sarah Chen">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Sarah Chen
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button><button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Mark Davis" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Mark Davis">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Mark Davis
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button><button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Elena Rodriguez" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Elena Rodriguez">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Elena Rodriguez
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button><button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by David Kim" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="David Kim">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
David Kim
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button><button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Alex Morgan" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Alex Morgan">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Alex Morgan
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button><button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Priya Patel" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Priya Patel">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Priya Patel
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button><button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Sarah Chen" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgb(59, 130, 246);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Sarah Chen">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Sarah Chen
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button><button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Mark Davis" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Mark Davis">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Mark Davis
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button><button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Elena Rodriguez" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Elena Rodriguez">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Elena Rodriguez
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button><button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by David Kim" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="David Kim">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
David Kim
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button><button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Alex Morgan" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Alex Morgan">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Alex Morgan
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button><button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Priya Patel" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Priya Patel">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Priya Patel
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button><button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Sarah Chen" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgb(59, 130, 246);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Sarah Chen">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Sarah Chen
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button><button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Mark Davis" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Mark Davis">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Mark Davis
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button><button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Elena Rodriguez" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Elena Rodriguez">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Elena Rodriguez
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button><button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by David Kim" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="David Kim">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
David Kim
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button><button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Alex Morgan" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Alex Morgan">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Alex Morgan
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button><button class="absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300" aria-label="View testimonial by Priya Patel" style="top: 20%; left: 15%;">
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden" style=" border-color: rgba(255, 255, 255, 0.2);">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="Priya Patel">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
Priya Patel
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
</button></div>
<div class="absolute bottom-8 text-neutral-600 text-[10px] font-mono opacity-50 hidden md:block">
USE ARROW KEYS TO NAVIGATE
</div>
</div>
<script>
(() => {
const TESTIMONIALS = [
{ id: "01", name: "Sarah Chen", role: "CTO, TechFlow", img: "https://randomuser.me/api/portraits/women/44.jpg", metric: "-40% Time", quote: "We reduced our deployment time by 40% in the first week. It feels like magic." },
{ id: "02", name: "Mark Davis", role: "Staff Engineer, Northline", img: "https://randomuser.me/api/portraits/men/32.jpg", metric: "10 hrs/wk", quote: "The system feels readable again. We finally ship automation without fear of hidden breakpoints." },
{ id: "03", name: "Elena Rodriguez", role: "Ops Director, Kinetic", img: "https://randomuser.me/api/portraits/women/65.jpg", metric: "2 days", quote: "Setup was fast, but what impressed me is stability. The workflow stays calm even as it scales." },
{ id: "04", name: "David Kim", role: "Infra Lead, CloudFoundry", img: "https://randomuser.me/api/portraits/men/86.jpg", metric: "0 incidents", quote: "Observability feels built in, not bolted on. We can trace what happened without digging." },
{ id: "05", name: "Alex Morgan", role: "Founder, Loopbase", img: "https://randomuser.me/api/portraits/men/22.jpg", metric: "99.9%", quote: "It’s rare to see motion used to clarify. The experience explains the product before the UI does." },
{ id: "06", name: "Priya Patel", role: "Product Ops, Arcwave", img: "https://randomuser.me/api/portraits/women/28.jpg", metric: "1 workflow", quote: "We consolidated scattered automations into one flow. Now the team understands it instantly." }
];
const section = document.getElementById("testimonials");
const svg = document.getElementById("connection-svg");
const path = document.getElementById("connection-line");
const base = document.getElementById("connection-base");
const dot = document.getElementById("connection-dot");
const anchorLeft = document.getElementById("panel-anchor-left");
const anchorRight = document.getElementById("panel-anchor-right");
const panel = document.getElementById("spotlight-panel");
const orbitContainer = document.getElementById("orbit-container");
const avatarButtons = Array.from(orbitContainer.querySelectorAll("button[data-avatar]"));
const sContent = document.getElementById("spotlight-content");
const sImg = document.getElementById("s-img");
const sName = document.getElementById("s-name");
const sRole = document.getElementById("s-role");
const sQuote = document.getElementById("s-quote");
const sMetric = document.getElementById("s-metric");
const sId = document.getElementById("s-id");
const scan = document.getElementById("scan-line");
function toSvgPoint(clientX, clientY) {
const r = svg.getBoundingClientRect();
return { x: clientX - r.left, y: clientY - r.top };
}
function rectOf(el) {
return el.getBoundingClientRect();
}
function centerOfRect(r) {
return { x: r.left + r.width / 2, y: r.top + r.height / 2 };
}
function normalize(vx, vy) {
const len = Math.hypot(vx, vy) || 1;
return { x: vx / len, y: vy / len };
}
// Start the noodle at the AVATAR EDGE (not center)
function pointOnAvatarEdge(btn, towardX, towardY) {
const r = rectOf(btn);
const c = centerOfRect(r);
const dir = normalize(towardX - c.x, towardY - c.y);
const radius = Math.min(r.width, r.height) / 2;
return { x: c.x + dir.x * (radius + 2), y: c.y + dir.y * (radius + 2) };
}
// End the noodle at the CARD EDGE (left or right anchor)
function pickCardAnchor(btnCenterX) {
const pr = rectOf(panel);
const pc = centerOfRect(pr);
return btnCenterX < pc.x ? anchorLeft : anchorRight;
}
function buildCurve(start, end) {
const dx = end.x - start.x;
const dy = end.y - start.y;
const c1 = { x: start.x + dx * 0.35, y: start.y + dy * 0.10 };
const c2 = { x: start.x + dx * 0.70, y: start.y + dy * 0.90 };
return `M ${start.x.toFixed(2)} ${start.y.toFixed(2)} C ${c1.x.toFixed(2)} ${c1.y.toFixed(2)}, ${c2.x.toFixed(2)} ${c2.y.toFixed(2)}, ${end.x.toFixed(2)} ${end.y.toFixed(2)}`;
}
let dotRAF = null;
function stopDot() {
if (dotRAF) cancelAnimationFrame(dotRAF);
dotRAF = null;
}
function animateDotAlongPath(totalLen) {
stopDot();
let startTime = null;
const loop = (t) => {
if (!startTime) startTime = t;
const elapsed = (t - startTime) / 1000;
const speed = 0.55;
const phase = (elapsed * speed) % 2;
const u = phase <= 1 ? phase : 2 - phase;
const p = path.getPointAtLength(u * totalLen);
dot.setAttribute("cx", p.x);
dot.setAttribute("cy", p.y);
dotRAF = requestAnimationFrame(loop);
};
dotRAF = requestAnimationFrame(loop);
}
function playStrokeIntro(totalLen) {
base.style.opacity = "1";
path.style.opacity = "1";
dot.style.opacity = "1";
path.style.strokeDasharray = totalLen;
path.style.strokeDashoffset = totalLen;
path.animate([{ strokeDashoffset: totalLen }, { strokeDashoffset: 0 }], {
duration: 650,
easing: "cubic-bezier(0.16, 1, 0.3, 1)",
fill: "forwards"
});
}
function flashScan() {
if (!scan) return;
scan.style.opacity = "0";
scan.style.top = "0px";
scan.animate(
[
{ transform: "translateY(0px)", opacity: 0 },
{ transform: "translateY(10px)", opacity: 1 },
{ transform: "translateY(260px)", opacity: 0 }
],
{ duration: 700, easing: "cubic-bezier(0.16, 1, 0.3, 1)" }
);
}
function setSpotlight(i) {
const t = TESTIMONIALS[i];
sContent.animate([{ opacity: 1, filter: "blur(0px)" }, { opacity: 0, filter: "blur(10px)" }], {
duration: 160,
easing: "ease-out",
fill: "forwards"
}).onfinish = () => {
sImg.src = t.img;
sName.textContent = t.name;
sRole.textContent = t.role;
sQuote.textContent = t.quote;
sMetric.textContent = t.metric;
sId.textContent = t.id;
sContent.animate([{ opacity: 0, filter: "blur(10px)" }, { opacity: 1, filter: "blur(0px)" }], {
duration: 260,
easing: "cubic-bezier(0.16, 1, 0.3, 1)",
fill: "forwards"
});
flashScan();
};
}
// ✅ Key fix: choose left/right edge of card, and start at avatar edge
function drawConnectionToButton(btn) {
const br = rectOf(btn);
const bc = centerOfRect(br);
const chosenAnchor = pickCardAnchor(bc.x);
const ar = rectOf(chosenAnchor);
const ac = centerOfRect(ar);
const startClient = pointOnAvatarEdge(btn, ac.x, ac.y);
const endClient = { x: ac.x, y: ac.y };
const start = toSvgPoint(startClient.x, startClient.y);
const end = toSvgPoint(endClient.x, endClient.y);
const d = buildCurve(start, end);
base.setAttribute("d", d);
path.setAttribute("d", d);
const totalLen = path.getTotalLength();
playStrokeIntro(totalLen);
animateDotAlongPath(totalLen);
}
function setActiveButton(activeIndex) {
avatarButtons.forEach((b) => {
const ring = b.querySelector("div > div");
if (!ring) return;
ring.classList.remove("border-blue-500/70");
ring.classList.add("border-white/20");
ring.style.borderColor = "";
});
const activeBtn = avatarButtons[activeIndex];
const activeRing = activeBtn.querySelector("div > div");
if (activeRing) {
activeRing.classList.remove("border-white/20");
activeRing.classList.add("border-blue-500/70");
activeRing.style.borderColor = "rgba(59,130,246,0.8)";
}
}
let current = 2;
function selectIndex(i) {
current = (i + TESTIMONIALS.length) % TESTIMONIALS.length;
setActiveButton(current);
setSpotlight(current);
drawConnectionToButton(avatarButtons[current]);
}
avatarButtons.forEach((btn) => {
btn.addEventListener("click", () => {
const idx = parseInt(btn.getAttribute("data-avatar") || "0", 10);
selectIndex(idx);
});
});
section.addEventListener("keydown", (e) => {
if (e.key === "ArrowRight" || e.key === "ArrowDown") {
e.preventDefault();
selectIndex(current + 1);
}
if (e.key === "ArrowLeft" || e.key === "ArrowUp") {
e.preventDefault();
selectIndex(current - 1);
}
});
const relayout = () => drawConnectionToButton(avatarButtons[current]);
window.addEventListener("resize", () => requestAnimationFrame(relayout), { passive: true });
window.addEventListener("scroll", () => requestAnimationFrame(relayout), { passive: true });
window.addEventListener("load", () => setTimeout(relayout, 80));
base.style.opacity = "0";
path.style.opacity = "0";
dot.style.opacity = "0";
selectIndex(current);
})();
</script>
</section>
<!-- CONTACT -->
<section class="overflow-hidden bg-neutral-950 border-white/5 border-t pt-32 pb-32 relative" id="contact">
<div class="section-aura"></div>
<div class="max-w-4xl mx-auto px-6 relative z-10 text-center">
<h2 class="text-4xl md:text-5xl font-display font-semibold text-white tracking-tight mb-7" data-reveal="">
Choose the workflow that fits your scale.
</h2>
<p class="text-neutral-400 leading-relaxed max-w-2xl mx-auto" data-reveal="">
Get a guided walkthrough of the control plane, policies, and rollout model. No hype, just clarity.
</p>
<div class="mt-10 flex flex-col sm:flex-row items-center justify-center gap-4" data-reveal="" style=" transition: opacity 0.8s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);">
<a href="/pricing" class="hover:bg-neutral-200 transition font-medium text-black bg-white rounded-full pt-4 pr-8 pb-4 pl-8">
Explore Pricing
</a>
<a href="#" class="px-8 py-4 rounded-full border border-white/10 text-white hover:bg-white/5 transition backdrop-blur-sm">
Talk to Sales
</a>
</div>
<div class="mt-14 max-w-xl mx-auto" data-reveal="">
<div class="hairline rounded-full"></div>
<div class="mt-5 text-[10px] font-mono uppercase tracking-[0.22em] text-white/35">
Response time: under 24 hours
</div>
</div>
</div>
</section>
<footer class="py-10 border-t border-white/5 text-center text-neutral-600 text-xs font-mono">
<p class="">© 2024 Nexus Inc. All rights reserved.</p>
</footer>
<script>
// --- 1. Mouse Tracking (Modified) ---
document.addEventListener('mousemove', (e) => {
document.documentElement.style.setProperty('--mouse-x', e.clientX + 'px');
document.documentElement.style.setProperty('--mouse-y', e.clientY + 'px');
});
// --- 2. Canvas Particle Network ---
const canvas = document.getElementById('hero-canvas');
const ctx = canvas.getContext('2d');
let particlesArray;
function resizeCanvas() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
}
window.addEventListener('resize', () => {
resizeCanvas();
initParticles();
});
resizeCanvas();
class Particle {
constructor(x, y, directionX, directionY, size) {
this.x = x;
this.y = y;
this.directionX = directionX;
this.directionY = directionY;
this.size = size;
}
draw() {
ctx.beginPath();
ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2, false);
ctx.fillStyle = 'rgba(255,255,255,0.5)';
ctx.fill();
}
update() {
if (this.x > canvas.width || this.x < 0) this.directionX = -this.directionX;
if (this.y > canvas.height || this.y < 0) this.directionY = -this.directionY;
this.x += this.directionX;
this.y += this.directionY;
this.draw();
}
}
function initParticles() {
particlesArray = [];
const numberOfParticles = (canvas.height * canvas.width) / 15000;
for (let i = 0; i < numberOfParticles; i++) {
const size = (Math.random() * 2) + 0.5;
const x = Math.random() * canvas.width;
const y = Math.random() * canvas.height;
const directionX = (Math.random() * 0.4) - 0.2;
const directionY = (Math.random() * 0.4) - 0.2;
particlesArray.push(new Particle(x, y, directionX, directionY, size));
}
}
function animateParticles() {
requestAnimationFrame(animateParticles);
ctx.clearRect(0, 0, canvas.width, canvas.height);
for (let i = 0; i < particlesArray.length; i++) particlesArray[i].update();
connectParticles();
}
function connectParticles() {
for (let a = 0; a < particlesArray.length; a++) {
for (let b = a; b < particlesArray.length; b++) {
const distance = ((particlesArray[a].x - particlesArray[b].x) ** 2) + ((particlesArray[a].y - particlesArray[b].y) ** 2);
if (distance < (canvas.width / 9) * (canvas.height / 9)) {
const opacityValue = 1 - (distance / 20000);
ctx.strokeStyle = 'rgba(255, 255, 255,' + (opacityValue * 0.1) + ')';
ctx.lineWidth = 1;
ctx.beginPath();
ctx.moveTo(particlesArray[a].x, particlesArray[a].y);
ctx.lineTo(particlesArray[b].x, particlesArray[b].y);
ctx.stroke();
}
}
}
}
initParticles();
animateParticles();
// --- 3. Sticky Scroll & Door Interaction ---
const doorLeft = document.getElementById('door-left');
const doorRight = document.getElementById('door-right');
const heroBg = document.getElementById('hero-bg-image');
const heroContent = document.getElementById('hero-content');
const scrollHint = document.getElementById('scroll-hint');
window.addEventListener('scroll', () => {
const scrollY = window.scrollY;
const windowHeight = window.innerHeight;
const progress = Math.max(0, Math.min(1, scrollY / (windowHeight * 1.2)));
const moveDist = progress * 60;
if (doorLeft && doorRight) {
doorLeft.style.transform = `translateX(-${moveDist}vw)`;
doorRight.style.transform = `translateX(${moveDist}vw)`;
doorLeft.style.opacity = 1 - (progress * 1.5);
doorRight.style.opacity = 1 - (progress * 1.5);
}
if (heroBg) {
heroBg.style.opacity = progress;
heroBg.style.transform = `scale(${0.9 + (progress * 0.1)})`;
heroBg.style.filter = `blur(${(1 - progress) * 10}px)`;
}
if (scrollHint) scrollHint.style.opacity = 1 - (progress * 3);
if (heroContent) {
if (progress > 0.6) {
const localProgress = (progress - 0.6) * 2.5;
heroContent.style.opacity = Math.min(1, localProgress);
heroContent.style.transform = `translateY(${(1 - Math.min(1, localProgress)) * 40}px)`;
} else {
heroContent.style.opacity = 0;
}
}
});
// --- 4. Intersection Observer for Reveals ---
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('active');
entry.target.style.opacity = '1';
entry.target.style.transform = 'translateY(0)';
}
});
}, { threshold: 0.1, rootMargin: "0px 0px -50px 0px" });
document.querySelectorAll('.scroll-reveal').forEach(el => {
el.style.opacity = '0';
el.style.transform = 'translateY(40px)';
el.style.transition = 'opacity 0.8s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1)';
observer.observe(el);
});
// ✅ Testimonials reveal animation
const tReveal = document.querySelector('.t-reveal');
if (tReveal) {
const tObs = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('is-visible');
tObs.disconnect();
}
});
}, { threshold: 0.2 });
tObs.observe(tReveal);
}
// --- 6. Mobile Menu Toggle ---
const menuBtn = document.getElementById('mobile-menu-btn');
const mobileMenu = document.getElementById('mobile-menu');
if (menuBtn && mobileMenu) {
menuBtn.addEventListener('click', () => {
mobileMenu.classList.toggle('hidden');
});
}
// --- 7. Hide header on scroll down, show on up (Mobile) ---
let lastScroll = 0;
const mobileHeader = document.getElementById('mobile-header');
window.addEventListener('scroll', () => {
const currentScroll = window.pageYOffset;
if (!mobileHeader) return;
if (currentScroll > lastScroll && currentScroll > 50) {
mobileHeader.style.transform = 'translateY(-100%)';
} else {
mobileHeader.style.transform = 'translateY(0)';
}
lastScroll = currentScroll;
});
</script>
<script>
document.addEventListener("DOMContentLoaded", () => {
gsap.registerPlugin(ScrollTrigger);
const data = [
{ id: "01", name: "Sarah Chen", role: "CTO, TechFlow", quote: "We reduced our deployment time by 40% in the first week. It feels like magic.", metric: "-40% Time", img: "https://randomuser.me/api/portraits/women/44.jpg" },
{ id: "02", name: "Mark Davis", role: "Lead Dev, ScaleUp", quote: "Zero downtime during our biggest migration ever. The reliability is unmatched.", metric: "100% Uptime", img: "https://randomuser.me/api/portraits/men/32.jpg" },
{ id: "03", name: "Elena Rodriguez", role: "VP Eng, Nexus", quote: "The observability suite saved us 15 engineering hours per week.", metric: "15hr/wk Saved", img: "https://randomuser.me/api/portraits/women/65.jpg" },
{ id: "04", name: "David Kim", role: "Architect, CoreSys", quote: "Global latency dropped to under 50ms immediately after switching to Nexus Edge.", metric: "<50ms Latency", img: "https://randomuser.me/api/portraits/men/86.jpg" },
{ id: "05", name: "Alex Morgan", role: "DevOps, CloudNine", quote: "Setup took less than an hour. The developer experience is world-class.", metric: "1hr Setup", img: "https://randomuser.me/api/portraits/men/22.jpg" },
{ id: "06", name: "Priya Patel", role: "Founder, StartUp", quote: "Security compliance out of the box was a game changer for our Series A.", metric: "SOC2 Ready", img: "https://randomuser.me/api/portraits/women/28.jpg" }
];
const container = document.getElementById('orbit-container');
const spotlightPanel = document.getElementById('spotlight-panel');
const panelAnchor = document.getElementById('panel-anchor');
const connectionPath = document.getElementById('connection-line');
const connectionDot = document.getElementById('connection-dot');
// Spotlight Elements
const sName = document.getElementById('s-name');
const sRole = document.getElementById('s-role');
const sQuote = document.getElementById('s-quote');
const sImg = document.getElementById('s-img');
const sMetric = document.getElementById('s-metric');
const sId = document.getElementById('s-id');
const sContent = document.getElementById('spotlight-content');
const scanLine = document.getElementById('scan-line');
let activeIndex = 0;
let capsules = [];
// Define positions (percentage based to be responsive)
const positions = [
{ top: 20, left: 15 }, // Top Left
{ top: 15, left: 75 }, // Top Right
{ top: 50, left: 85 }, // Mid Right
{ top: 80, left: 70 }, // Bottom Right
{ top: 85, left: 25 }, // Bottom Left
{ top: 55, left: 10 } // Mid Left
];
// Render Capsules
data.forEach((item, i) => {
const btn = document.createElement('button');
btn.className = `absolute group pointer-events-auto focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full transition-all duration-300`;
btn.style.top = `${positions[i].top}%`;
btn.style.left = `${positions[i].left}%`;
btn.setAttribute('aria-label', `View testimonial by ${item.name}`);
btn.innerHTML = `
<div class="relative">
<div class="w-12 h-12 md:w-14 md:h-14 rounded-full p-0.5 border border-white/20 bg-neutral-900/80 backdrop-blur-md group-hover:border-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg overflow-hidden">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full rounded-full object-cover opacity-70 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" alt="${item.name}">
</div>
<!-- Label -->
<div class="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-50">
<div class="bg-neutral-900/90 text-white text-[10px] px-2 py-1 rounded border border-white/10 backdrop-blur font-mono">
${item.name}
</div>
</div>
<!-- Pulse Dot -->
<div class="absolute top-0 right-0 w-2.5 h-2.5 bg-blue-500 rounded-full border-2 border-black scale-0 group-hover:scale-100 transition-transform duration-300 animate-pulse"></div>
</div>
`;
// Random float animation
gsap.to(btn, {
y: "random(-15, 15)",
x: "random(-10, 10)",
duration: "random(3, 5)",
repeat: -1,
yoyo: true,
ease: "sine.inOut",
delay: Math.random() * 2
});
btn.addEventListener('mouseenter', () => {
gsap.to(btn, { scale: 1.1, duration: 0.3 });
});
btn.addEventListener('mouseleave', () => {
if(activeIndex !== i) gsap.to(btn, { scale: 1, duration: 0.3 });
});
btn.addEventListener('click', () => updateActive(i));
container.appendChild(btn);
capsules.push(btn);
});
// ScrollTrigger Entry Animation
gsap.from(capsules, {
scrollTrigger: {
trigger: "#testimonials",
start: "top 70%",
},
scale: 0,
opacity: 0,
duration: 0.8,
stagger: 0.1,
ease: "back.out(1.7)"
});
gsap.from(spotlightPanel, {
scrollTrigger: {
trigger: "#testimonials",
start: "top 70%",
},
y: 50,
opacity: 0,
duration: 0.8,
delay: 0.2
});
// Core Update Function
function updateActive(index) {
if (index < 0) index = data.length - 1;
if (index >= data.length) index = 0;
activeIndex = index;
// Update UI state of capsules
capsules.forEach((cap, i) => {
const img = cap.querySelector('img');
const wrapper = cap.querySelector('div > div');
if (i === index) {
gsap.to(wrapper, { borderColor: '#3b82f6', scale: 1.15, duration: 0.3 });
gsap.to(img, { opacity: 1, grayscale: 0, duration: 0.3 });
} else {
gsap.to(wrapper, { borderColor: 'rgba(255,255,255,0.2)', scale: 1, duration: 0.3 });
gsap.to(img, { opacity: 0.7, grayscale: 1, duration: 0.3 });
}
});
// Animate Panel Content Swap
sContent.style.opacity = 0;
setTimeout(() => {
const item = data[index];
sName.textContent = item.name;
sRole.textContent = item.role;
sQuote.textContent = item.quote;
sMetric.textContent = item.metric;
sId.textContent = item.id;
sImg.src = item.img;
sContent.style.opacity = 1;
// Scan effect
gsap.fromTo(scanLine, { top: '0%', opacity: 1 }, { top: '100%', opacity: 0, duration: 0.8, ease: "power2.inOut" });
updateLine();
}, 300);
}
// SVG Line Logic
function updateLine() {
const activeCap = capsules[activeIndex];
if (!activeCap || !panelAnchor) return;
const startRect = activeCap.getBoundingClientRect();
const endRect = panelAnchor.getBoundingClientRect();
const containerRect = document.getElementById('testimonials').getBoundingClientRect();
// Calculate relative coordinates
const x1 = startRect.left + startRect.width / 2 - containerRect.left;
const y1 = startRect.top + startRect.height / 2 - containerRect.top;
const x2 = endRect.left + endRect.width / 2 - containerRect.left;
const y2 = endRect.top + endRect.height / 2 - containerRect.top;
// Draw Curve
const deltaX = x2 - x1;
const cp1x = x1 + deltaX * 0.5;
const cp1y = y1;
const cp2x = x2 - deltaX * 0.5;
const cp2y = y2;
const pathString = `M ${x1} ${y1} C ${cp1x} ${cp1y}, ${cp2x} ${cp2y}, ${x2} ${y2}`;
connectionPath.setAttribute('d', pathString);
connectionPath.classList.remove('opacity-0');
// Animate line drawing
const length = connectionPath.getTotalLength();
connectionPath.style.strokeDasharray = length;
connectionPath.style.strokeDashoffset = length;
// Trigger reflow
connectionPath.getBoundingClientRect();
gsap.to(connectionPath, {
strokeDashoffset: 0,
duration: 0.6,
ease: "power2.out"
});
// Move dot
gsap.killTweensOf(connectionDot);
gsap.to(connectionDot, {
motionPath: {
path: pathString,
align: "#connection-line",
alignOrigin: [0.5, 0.5],
},
duration: 1,
repeat: -1,
repeatDelay: 1,
ease: "power1.inOut",
opacity: 1
});
}
// Initialization
updateActive(0);
window.addEventListener('resize', () => {
updateLine();
});
// Keyboard Nav
document.addEventListener('keydown', (e) => {
const tSection = document.getElementById('testimonials');
const rect = tSection.getBoundingClientRect();
if (rect.top < window.innerHeight && rect.bottom > 0) {
if (e.key === 'ArrowRight') updateActive(activeIndex + 1);
if (e.key === 'ArrowLeft') updateActive(activeIndex - 1);
}
});
});
</script>
</body></html>