All Prompts
All Prompts
testimonialssectiontailwindanimatedscrollingctastatsresponsivetestimonial
Animated Scrolling Testimonials Section with CTAs
Адаптивная секция с отзывами клиентов и CTA. Автопрокрутка, статистика, эффекты при наведении. Идеально для лендингов и портфолио.
Prompt
<section class="relative z-10 sm:p-8 animate-scaleIn animation-delay-400 bg-zinc-950/60 w-full max-w-7xl border-white/10 border rounded-3xl mt-24 mr-auto ml-auto pt-6 pr-6 pb-6 pl-6 backdrop-blur">
<!-- Header -->
<div class="flex gap-6 sm:px-0 pr-1 pl-1 items-center animate-fadeInUp">
<span class="inline-flex items-center gap-2 text-sm">
<span class="text-4xl font-medium text-zinc-100">Testimonials</span>
</span>
<span aria-hidden="true" role="separator" aria-orientation="vertical" class="w-px bg-white/10 h-10"></span>
<span class="text-sm text-zinc-400">client success stories</span>
</div>
<div class="h-px bg-white/10 mt-4 animate-fadeIn animation-delay-100"></div>
<div class="relative sm:mt-8 overflow-hidden sm:rounded-3xl border-0 rounded-none mt-6">
<div class="grid grid-cols-1 lg:grid-cols-12 gap-8 sm:gap-10 items-center">
<!-- Left: Copy, stats, CTAs -->
<div class="lg:col-span-6 animate-fadeInLeft animation-delay-200">
<!-- Heading -->
<h3 class="text-[44px] sm:text-6xl md:text-7xl leading-[1.05] font-light text-zinc-100 tracking-tighter">Clients love Brind</h3>
<p class="mt-3 text-sm sm:text-base text-zinc-400 max-w-[48ch]">Trusted by innovative companies, delivering exceptional digital experiences that drive real results.</p>
<div class="mt-6 grid grid-cols-3 gap-3 stagger-animation">
<div class="sm:p-6 hover-lift bg-zinc-900/60 border-white/10 border rounded-2xl pt-5 pr-5 pb-5 pl-5">
<div class="text-2xl sm:text-3xl font-semibold text-white tracking-tight">50+</div>
<div class="text-xs text-zinc-400 mt-1">Projects delivered</div>
</div>
<div class="rounded-2xl bg-zinc-900/60 border border-white/10 p-5 sm:p-6 hover-lift">
<div class="text-2xl sm:text-3xl font-semibold text-white tracking-tight">5</div>
<div class="text-xs text-zinc-400 mt-1">Years experience</div>
</div>
<div class="rounded-2xl bg-zinc-900/60 border border-white/10 p-5 sm:p-6 hover-lift">
<div class="text-2xl sm:text-3xl font-semibold text-white tracking-tight">100%</div>
<div class="text-xs text-zinc-400 mt-1">Client satisfaction</div>
</div>
</div>
<div class="h-px bg-white/10 mt-6 animate-fadeIn animation-delay-400"></div>
<!-- CTAs -->
<div class="flex gap-6 animate-fadeInUp animation-delay-500 mt-5 items-center">
<a href="#work" style="align-items: center; background-image: linear-gradient(144deg, rgb(175, 64, 255), rgb(91, 66, 243) 50%, rgb(0, 221, 235)); border: 0px; border-radius: 8px; box-shadow: rgba(151, 65, 252, 0.2) 0px 15px 30px -5px; box-sizing: border-box; color: rgb(255, 255, 255); display: inline-flex; font-size: 14px; justify-content: center; line-height: 1em; max-width: 100%; min-width: auto; padding: 3px; text-decoration: none; user-select: none; touch-action: manipulation; white-space: nowrap; cursor: pointer; height: 50px; margin-top: 1rem; transform: scale(1); width: auto;" onmouseover="this.querySelector('span').style.background='none'" onmouseout="this.querySelector('span').style.backgroundColor='rgb(5, 6, 45)'" onmousedown="this.style.transform='scale(0.9)'" onmouseup="this.style.transform='scale(1)'" class="">
<span style="background: none rgb(5, 6, 45); padding: 16px 24px; border-radius: 6px; display: flex; align-items: center; justify-content: center; gap: 0.5rem;" class="">Book a call</span>
</a>
<a href="#pricing" style="align-items: center; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 8px; box-shadow: rgba(255, 255, 255, 0.05) 0px 1px 0px inset; box-sizing: border-box; color: rgb(255, 255, 255); display: inline-flex; font-size: 14px; justify-content: center; line-height: 1em; max-width: 100%; min-width: auto; padding: 3px; text-decoration: none; user-select: none; touch-action: manipulation; white-space: nowrap; cursor: pointer; height: 50px; margin-top: 1rem; transform: scale(1); width: auto;" onmouseover="this.style.backgroundColor='rgba(255, 255, 255, 0.1)'" onmouseout="this.style.backgroundColor='rgba(255, 255, 255, 0.05)'" onmousedown="this.style.transform='scale(0.9)'" onmouseup="this.style.transform='scale(1)'" class="">
<span style="padding: 16px 24px; border-radius: 6px; display: flex; align-items: center; justify-content: center; gap: 0.5rem;" class="">Start project<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right" style="width: 16px; height: 16px;"><path d="M5 12h14" class=""></path><path d="m12 5 7 7-7 7" class=""></path></svg></span>
</a>
</div>
</div>
<!-- Right: Testimonial cards with scrolling animation -->
<div class="lg:col-span-6 animate-fadeInRight animation-delay-300 relative overflow-hidden h-[600px] rounded-3xl">
<style>
@keyframes scroll-testimonials {
0% {
transform: translateY(0);
}
100% {
transform: translateY(-50%);
}
}
.testimonial-scroll-container {
animation: scroll-testimonials 30s linear infinite;
will-change: transform;
}
.testimonial-scroll-container:hover {
animation-play-state: paused;
}
</style>
<div class="testimonial-scroll-container flex flex-col gap-6">
<!-- First set of testimonials -->
<article class="sm:p-8 bg-gradient-to-br from-zinc-900/90 via-zinc-900/50 to-zinc-800/20 border-zinc-800/60 border rounded-3xl pt-6 pr-6 pb-6 pl-6 flex-shrink-0 hover-lift">
<div class="flex items-start gap-4">
<div class="flex-1">
<div class="flex items-center justify-between">
<div class="">
<div class="text-lg font-semibold text-zinc-100 tracking-tight">Sarah Thompson</div>
<div class="text-xs text-zinc-400 mt-0.5">CEO, TechFlow Solutions</div>
</div>
</div>
<div class="h-px bg-white/10 my-4"></div>
<div class="flex items-center gap-2 text-sm text-zinc-300">
<span class="text-zinc-200">5.0</span>
<div class="flex text-amber-400">
<svg class="w-4 h-4 fill-current" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756z" class=""></path></svg>
<svg class="w-4 h-4 fill-current" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z" class=""></path></svg>
<svg class="w-4 h-4 fill-current" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z" class=""></path></svg>
<svg class="w-4 h-4 fill-current" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z" class=""></path></svg>
<svg class="w-4 h-4 fill-current" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z" class=""></path></svg>
</div>
</div>
<p class="mt-3 text-sm sm:text-base text-zinc-300">
"Working with Brind was exceptional. The team delivered a stunning website that perfectly captured our vision and significantly improved our user engagement."
</p>
<div class="mt-4 flex items-center gap-2">
<span class="inline-flex items-center gap-1 text-xs text-emerald-400 bg-emerald-400/10 px-2 py-1 rounded-full">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="trending-up" class="lucide lucide-trending-up w-3.5 h-3.5"><path d="M16 7h6v6" class=""></path><path d="m22 7-8.5 8.5-5-5L2 17" class=""></path></svg>
+180% engagement
</span>
<span class="text-xs text-zinc-500">Web Development</span>
</div>
</div>
</div>
</article>
<article class="sm:p-8 bg-gradient-to-br from-zinc-900/90 via-zinc-900/50 to-zinc-800/20 border-zinc-800/60 border rounded-3xl pt-6 pr-6 pb-6 pl-6 flex-shrink-0 hover-lift">
<div class="flex items-start gap-4">
<div class="flex-1">
<div class="flex items-center justify-between">
<div class="">
<div class="text-lg font-semibold text-zinc-100 tracking-tight">Marcus Rodriguez</div>
<div class="text-xs text-zinc-400 mt-0.5">CTO, InnovateHub</div>
</div>
</div>
<div class="h-px bg-white/10 my-4"></div>
<div class="flex items-center gap-2 text-sm text-zinc-300">
<span class="text-zinc-200">5.0</span>
<div class="flex text-amber-400">
<svg class="w-4 h-4 fill-current" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z" class=""></path></svg>
<svg class="w-4 h-4 fill-current" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z" class=""></path></svg>
<svg class="w-4 h-4 fill-current" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z" class=""></path></svg>
<svg class="w-4 h-4 fill-current" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z" class=""></path></svg>
<svg class="w-4 h-4 fill-current" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z" class=""></path></svg>
</div>
</div>
<p class="mt-3 text-sm sm:text-base text-zinc-300">
"The creative development process was seamless. Brind understood our technical requirements and delivered a solution that exceeded our expectations."
</p>
<div class="mt-4 flex items-center gap-2">
<span class="inline-flex items-center gap-1 text-xs text-blue-400 bg-blue-400/10 px-2 py-1 rounded-full">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="smartphone" class="lucide lucide-smartphone w-3.5 h-3.5"><rect width="14" height="20" x="5" y="2" rx="2" ry="2" class=""></rect><path d="M12 18h.01" class=""></path></svg>
Mobile App
</span>
<span class="text-xs text-zinc-500">Development</span>
</div>
</div>
</div>
</article>
<article class="sm:p-8 bg-gradient-to-br from-zinc-900/90 via-zinc-900/50 to-zinc-800/20 border-zinc-800/60 border rounded-3xl pt-6 pr-6 pb-6 pl-6 flex-shrink-0 hover-lift">
<div class="flex items-start gap-4">
<div class="flex-1">
<div class="flex items-center justify-between">
<div class="">
<div class="text-lg font-semibold text-zinc-100 tracking-tight">Emma Chen</div>
<div class="text-xs text-zinc-400 mt-0.5">Creative Director, PixelCraft</div>
</div>
</div>
<div class="h-px bg-white/10 my-4"></div>
<div class="flex items-center gap-2 text-sm text-zinc-300">
<span class="text-zinc-200">5.0</span>
<div class="flex text-amber-400">
<svg class="w-4 h-4 fill-current" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z" class=""></path></svg>
<svg class="w-4 h-4 fill-current" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z" class=""></path></svg>
<svg class="w-4 h-4 fill-current" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z" class=""></path></svg>
<svg class="w-4 h-4 fill-current" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4-756 4.635 1.123 6.545z" class=""></path></svg>
<svg class="w-4 h-4 fill-current" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z" class=""></path></svg>
</div>
</div>
<p class="mt-3 text-sm sm:text-base text-zinc-300">
"Outstanding attention to detail and creative vision. The brand identity work exceeded our expectations and truly captured our company's essence."
</p>
<div class="mt-4 flex items-center gap-2">
<span class="inline-flex items-center gap-1 text-xs text-purple-400 bg-purple-400/10 px-2 py-1 rounded-full">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="palette" class="lucide lucide-palette w-3.5 h-3.5"><path d="M12 22a1 1 0 0 1 0-20 10 9 0 0 1 10 9 5 5 0 0 1-5 5h-2.25a1.75 1.75 0 0 0-1.4 2.8l.3.4a1.75 1.75 0 0 1-1.4 2.8z" class=""></path><circle cx="13.5" cy="6.5" r=".5" fill="currentColor" class=""></circle><circle cx="17.5" cy="10.5" r=".5" fill="currentColor" class=""></circle><circle cx="6.5" cy="12.5" r=".5" fill="currentColor" class=""></circle><circle cx="8.5" cy="7.5" r=".5" fill="currentColor" class=""></circle></svg>
Brand Design
</span>
<span class="text-xs text-zinc-500">Visual Identity</span>
</div>
</div>
</div>
</article>
<article class="sm:p-8 bg-gradient-to-br from-zinc-900/90 via-zinc-900/50 to-zinc-800/20 border-zinc-800/60 border rounded-3xl pt-6 pr-6 pb-6 pl-6 flex-shrink-0 hover-lift">
<div class="flex items-start gap-4">
<div class="flex-1">
<div class="flex items-center justify-between">
<div class="">
<div class="text-lg font-semibold text-zinc-100 tracking-tight">David Park</div>
<div class="text-xs text-zinc-400 mt-0.5">Founder, StartupLab</div>
</div>
</div>
<div class="h-px bg-white/10 my-4"></div>
<div class="flex items-center gap-2 text-sm text-zinc-300">
<span class="text-zinc-200">5.0</span>
<div class="flex text-amber-400">
<svg class="w-4 h-4 fill-current" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z" class=""></path></svg>
<svg class="w-4 h-4 fill-current" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z" class=""></path></svg>
<svg class="w-4 h-4 fill-current" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z" class=""></path></svg>
<svg class="w-4 h-4 fill-current" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.123 6.545z" class=""></path></svg>
<svg class="w-4 h-4 fill-current" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z" class=""></path></svg>
</div>
</div>
<p class="mt-3 text-sm sm:text-base text-zinc-300">
"Fast turnaround, professional communication, and exceptional results. The full-stack solution helped us launch on time and under budget."
</p>
<div class="mt-4 flex items-center gap-2">
<span class="inline-flex items-center gap-1 text-xs text-orange-400 bg-orange-400/10 px-2 py-1 rounded-full">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="code" class="lucide lucide-code w-3.5 h-3.5"><path d="m16 18 6-6-6-6" class=""></path><path d="m8 6-6 6 6 6" class=""></path></svg>
Full-Stack
</span>
<span class="text-xs text-zinc-500">Development</span>
</div>
</div>
</div>
</article>
<!-- Duplicate set for seamless loop -->
<article class="sm:p-8 bg-gradient-to-br from-zinc-900/90 via-zinc-900/50 to-zinc-800/20 border-zinc-800/60 border rounded-3xl pt-6 pr-6 pb-6 pl-6 flex-shrink-0 hover-lift">
<div class="flex items-start gap-4">
<div class="flex-1">
<div class="flex items-center justify-between">
<div class="">
<div class="text-lg font-semibold text-zinc-100 tracking-tight">Sarah Thompson</div>
<div class="text-xs text-zinc-400 mt-0.5">CEO, TechFlow Solutions</div>
</div>
</div>
<div class="h-px bg-white/10 my-4"></div>
<div class="flex items-center gap-2 text-sm text-zinc-300">
<span class="text-zinc-200">5.0</span>
<div class="flex text-amber-400">
<svg class="w-4 h-4 fill-current" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756z" class=""></path></svg>
<svg class="w-4 h-4 fill-current" viewBox="0 0 20 20"><path d="M106.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z" class=""></path></svg>
<svg class="w-4 h-4 fill-current" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z" class=""></path></svg>
<svg class="w-4 h-4 fill-current" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z" class=""></path></svg>
<svg class="w-4 h-4 fill-current" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z" class=""></path></svg>
</div>
</div>
<p class="mt-3 text-sm sm:text-base text-zinc-300">
"Working with Brind was exceptional. The team delivered a stunning website that perfectly captured our vision and significantly improved our user engagement."
</p>
<div class="mt-4 flex items-center gap-2">
<span class="inline-flex items-center gap-1 text-xs text-emerald-400 bg-emerald-400/10 px-2 py-1 rounded-full">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="trending-up" class="lucide lucide-trending-up w-3.5 h-3.5"><path d="M16 7h6v6" class=""></path><path d="m22 7-8.5 8.5-5-5L2 17" class=""></path></svg>
+180% engagement
</span>
<span class="text-xs text-zinc-500">Web Development</span>
</div>
</div>
</div>
</article>
<article class="sm:p-8 bg-gradient-to-br from-zinc-900/90 via-zinc-900/50 to-zinc-800/20 border-zinc-800/60 border rounded-3xl pt-6 pr-6 pb-6 pl-6 flex-shrink-0 hover-lift">
<div class="flex items-start gap-4">
<div class="flex-1">
<div class="flex items-center justify-between">
<div class="">
<div class="text-lg font-semibold text-zinc-100 tracking-tight">Marcus Rodriguez</div>
<div class="text-xs text-zinc-400 mt-0.5">CTO, InnovateHub</div>
</div><div class="h-px bg-white/10 my-4"></div>
<div class="flex items-center gap-2 text-sm text-zinc-300">
<span class="text-zinc-200">5.0</span>
<div class="flex text-amber-400">
<svg class="w-4 h-4 fill-current" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z" class=""></path></svg>
<svg class="w-4 h-4 fill-current" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z" class=""></path></svg>
<svg class="w-4 h-4 fill-current" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z" class=""></path></svg>
<svg class="w-4 h-4 fill-current" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z" class=""></path></svg>
<svg class="w-4 h-4 fill-current" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z" class=""></path></svg>
</div>
</div>
<p class="mt-3 text-sm sm:text-base text-zinc-300">
"The creative development process was seamless. Brind understood our technical requirements and delivered a solution that exceeded our expectations."
</p>
<div class="mt-4 flex items-center gap-2">
<span class="inline-flex items-center gap-1 text-xs text-blue-400 bg-blue-400/10 px-2 py-1 rounded-full">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="smartphone" class="lucide lucide-smartphone w-3.5 h-3.5"><rect width="14" height="20" x="5" y="2" rx="2" ry="2" class=""></rect><path d="M12 18h.01" class=""></path></svg>
Mobile App
</span>
<span class="text-xs text-zinc-500">Development</span>
</div>
</div>
</div>
</div></article>
<article class="sm:p-8 bg-gradient-to-br from-zinc-900/90 via-zinc-900/50 to-zinc-800/20 border-zinc-800/60 border rounded-3xl pt-6 pr-6 pb-6 pl-6 flex-shrink-0 hover-lift">
<div class="flex items-start gap-4">
<div class="flex-1">
<div class="flex items-center justify-between">
<div class="">
<div class="text-lg font-semibold text-zinc-100 tracking-tight">Emma Chen</div>
<div class="text-xs text-zinc-400 mt-0.5">Creative Director, PixelCraft</div>
</div>
</div>
<div class="h-px bg-white/10 my-4"></div>
<div class="flex items-center gap-2 text-sm text-zinc-300">
<span class="text-zinc-200">5.0</span>
<div class="flex text-amber-400">
<svg class="w-4 h-4 fill-current" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z" class=""></path></svg>
<svg class="w-4 h-4 fill-current" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z" class=""></path></svg>
<svg class="w-4 h-4 fill-current" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z" class=""></path></svg>
<svg class="w-4 h-4 fill-current" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4-756 4.635 1.123 6.545z" class=""></path></svg>
<svg class="w-4 h-4 fill-current" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z" class=""></path></svg>
</div>
</div>
<p class="mt-3 text-sm sm:text-base text-zinc-300">
"Outstanding attention to detail and creative vision. The brand identity work exceeded our expectations and truly captured our company's essence."
</p>
<div class="mt-4 flex items-center gap-2">
<span class="inline-flex items-center gap-1 text-xs text-purple-400 bg-purple-400/10 px-2 py-1 rounded-full">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="palette" class="lucide lucide-palette w-3.5 h-3.5"><path d="M12 22a1 1 0 0 1 0-20 10 9 0 0 1 10 9 5 5 0 0 1-5 5h-2.25a1.75 1.75 0 0 0-1.4 2.8l.3.4a1.75 1.75 0 0 1-1.4 2.8z" class=""></path><circle cx="13.5" cy="6.5" r=".5" fill="currentColor" class=""></circle><circle cx="17.5" cy="10.5" r=".5" fill="currentColor" class=""></circle><circle cx="6.5" cy="12.5" r=".5" fill="currentColor" class=""></circle><circle cx="8.5" cy="7.5" r=".5" fill="currentColor" class=""></circle></svg>
Brand Design
</span>
<span class="text-xs text-zinc-500">Visual Identity</span>
</div>
</div>
</div>
</article>
<article class="sm:p-8 bg-gradient-to-br from-zinc-900/90 via-zinc-900/50 to-zinc-800/20 border-zinc-800/60 border rounded-3xl pt-6 pr-6 pb-6 pl-6 flex-shrink-0 hover-lift">
<div class="flex items-start gap-4">
<div class="flex-1">
<div class="flex items-center justify-between">
<div>
<div class="text-lg font-semibold text-zinc-100 tracking-tight">David Park</div>
<div class="text-xs text-zinc-400 mt-0.5">Founder, StartupLab</div>
</div>
</div>
<div class="h-px bg-white/10 my-4"></div>
<div class="flex items-center gap-2 text-sm text-zinc-300">
<span class="text-zinc-200">5.0</span>
<div class="flex text-amber-400">
<svg class="w-4 h-4 fill-current" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z" class=""></path></svg>
<svg class="w-4 h-4 fill-current" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z" class=""></path></svg>
<svg class="w-4 h-4 fill-current" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z" class=""></path></svg>
<svg class="w-4 h-4 fill-current" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z" class=""></path></svg>
<svg class="w-4 h-4 fill-current" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z" class=""></path></svg>
</div>
</div>
<p class="mt-3 text-sm sm:text-base text-zinc-300">
"Fast turnaround, professional communication, and exceptional results. The full-stack solution helped us launch on time and under budget."
</p>
<div class="mt-4 flex items-center gap-2">
<span class="inline-flex items-center gap-1 text-xs text-orange-400 bg-orange-400/10 px-2 py-1 rounded-full">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="code" class="lucide lucide-code w-3.5 h-3.5"><path d="m16 18 6-6-6-6" class=""></path><path d="m8 6-6 6 6 6" class=""></path></svg>
Full-Stack
</span>
<span class="text-xs text-zinc-500">Development</span>
</div>
</div>
</div>
</article>
</div>
<!-- Enhanced gradient overlays for fade effect -->
<div class="absolute inset-x-0 top-0 h-32 bg-gradient-to-b from-zinc-950 via-zinc-950/90 to-transparent pointer-events-none z-10"></div>
<div class="absolute inset-x-0 bottom-0 h-32 bg-gradient-to-t from-zinc-950 via-zinc-950/90 to-transparent pointer-events-none z-10"></div>
</div>
</div>
</div></section>