Publish component: Client Reviews - components/client-reviews.hbs
This commit is contained in:
Faster Marketplace
243
components/client-reviews.hbs
Normal file
243
components/client-reviews.hbs
Normal file
@@ -0,0 +1,243 @@
|
|||||||
|
<script src="https://cdn.tailwindcss.com"></script>
|
||||||
|
<link rel="stylesheet" href="/assets/css/client-reviews.css?v=2">
|
||||||
|
<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=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700&family=DM+Serif+Display&display=swap" rel="stylesheet">
|
||||||
|
<script>
|
||||||
|
tailwind.config = {
|
||||||
|
theme: {
|
||||||
|
extend: {
|
||||||
|
fontFamily: {
|
||||||
|
sans: ['DM Sans', 'sans-serif'],
|
||||||
|
serif: ['DM Serif Display', 'serif'],
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<section class="min-h-screen bg-gradient-to-b from-stone-50 via-white to-stone-50 relative overflow-hidden" data-hbs-id="kgvil9m">
|
||||||
|
|
||||||
|
<!-- Background decorations -->
|
||||||
|
<div class="absolute top-0 right-0 w-96 h-96 bg-amber-100/30 rounded-full blur-3xl" data-hbs-id="rc10em6"></div>
|
||||||
|
<div class="absolute bottom-0 left-0 w-80 h-80 bg-stone-100 rounded-full blur-3xl" data-hbs-id="kcgbwpk"></div>
|
||||||
|
|
||||||
|
<!-- Grid pattern overlay -->
|
||||||
|
<div class="absolute inset-0 opacity-30 dot-pattern" data-hbs-id="ppxw4ff"></div>
|
||||||
|
|
||||||
|
<div class="relative max-w-7xl mx-auto px-6 py-24 lg:py-32" data-hbs-id="rssx981">
|
||||||
|
|
||||||
|
<!-- Header section -->
|
||||||
|
<div class="text-center mb-20" data-hbs-id="c9s47aj">
|
||||||
|
<div class="inline-flex items-center gap-2 bg-stone-900 text-white px-4 py-2 rounded-full text-sm font-medium mb-8 shadow-xl shadow-stone-300/30" data-hbs-id="gdzenrz">
|
||||||
|
<span class="w-2 h-2 bg-amber-400 rounded-full animate-pulse" data-hbs-id="krtrv6e"></span>
|
||||||
|
Client Testimonials
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h2 class="text-5xl lg:text-7xl font-bold text-stone-900 tracking-tight mb-6 font-serif" data-hbs-id="6qpg835">
|
||||||
|
Trusted by
|
||||||
|
<span class="relative inline-block mx-3" data-hbs-id="a6j9zyw">
|
||||||
|
<span class="relative z-10" data-hbs-id="yhfwb3p">visionaries</span>
|
||||||
|
<svg class="absolute -bottom-2 left-0 w-full h-4 text-amber-300" viewBox="0 0 200 12" preserveAspectRatio="none" data-hbs-id="kz5lwn6">
|
||||||
|
<path d="M0,8 Q50,0 100,8 T200,8" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round"/>
|
||||||
|
</svg>
|
||||||
|
</span>
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
<p class="text-xl text-stone-500 max-w-2xl mx-auto leading-relaxed" data-hbs-id="8oh8d3s">
|
||||||
|
Real stories from industry leaders who chose excellence.
|
||||||
|
Their success is our greatest achievement.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Reviews grid -->
|
||||||
|
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6 lg:gap-8" data-hbs-id="vrhe0oo">
|
||||||
|
|
||||||
|
<!-- Review Card 1 -->
|
||||||
|
<div class="review-card group relative bg-white rounded-3xl p-8 shadow-sm border border-stone-100 cursor-pointer hover:border-stone-200" data-hbs-id="07b736m">
|
||||||
|
<!-- Decorative quote mark -->
|
||||||
|
<div class="quote-mark absolute -top-4 -left-2 text-8xl font-serif text-stone-100 select-none" data-hbs-id="3xvt8bt">"</div>
|
||||||
|
|
||||||
|
<!-- Rating -->
|
||||||
|
<div class="flex gap-1 mb-6 relative z-10" data-hbs-id="lx8xg3j">
|
||||||
|
<svg class="w-4 h-4 text-amber-400" fill="currentColor" viewBox="0 0 20 20" data-hbs-id="jgrdcrg"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
|
||||||
|
<svg class="w-4 h-4 text-amber-400" fill="currentColor" viewBox="0 0 20 20" data-hbs-id="904naf4"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
|
||||||
|
<svg class="w-4 h-4 text-amber-400" fill="currentColor" viewBox="0 0 20 20" data-hbs-id="af4tlku"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
|
||||||
|
<svg class="w-4 h-4 text-amber-400" fill="currentColor" viewBox="0 0 20 20" data-hbs-id="p7n5n76"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
|
||||||
|
<svg class="w-4 h-4 text-amber-400" fill="currentColor" viewBox="0 0 20 20" data-hbs-id="400txyw"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Review text -->
|
||||||
|
<p class="text-stone-600 leading-relaxed mb-8 relative z-10 text-lg" data-hbs-id="mhoxth0">
|
||||||
|
Working with this team
|
||||||
|
<span class="relative inline" data-hbs-id="pr2bji9">
|
||||||
|
<span class="relative z-10 font-medium text-stone-900" data-hbs-id="96vju1t">transformed our entire digital presence</span>
|
||||||
|
<span class="highlight-bar absolute bottom-0 left-0 w-full h-2 bg-amber-200/60" data-hbs-id="9pzhs15"></span>
|
||||||
|
</span>.
|
||||||
|
The attention to detail and creative vision exceeded every expectation we had.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<!-- Author info -->
|
||||||
|
<div class="flex items-center gap-4 relative z-10" data-hbs-id="xuj2biq">
|
||||||
|
<div class="avatar w-14 h-14 rounded-2xl bg-gradient-to-br from-stone-800 to-stone-600 flex items-center justify-center text-white font-semibold text-sm shadow-lg shadow-stone-300/30" data-hbs-id="w2ue8ww">
|
||||||
|
SM
|
||||||
|
</div>
|
||||||
|
<div data-hbs-id="ogxtmk6">
|
||||||
|
<h4 class="font-semibold text-stone-900 tracking-tight" data-hbs-id="zzfj7dd">Sarah Mitchell</h4>
|
||||||
|
<p class="text-stone-500 text-sm" data-hbs-id="43jznza">CEO, Lumina Studios</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Hover accent line -->
|
||||||
|
<div class="accent-line absolute bottom-0 left-8 right-8 h-1 bg-gradient-to-r from-amber-400 to-orange-400 rounded-full" data-hbs-id="8w76uig"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Review Card 2 (offset) -->
|
||||||
|
<div class="review-card group relative bg-white rounded-3xl p-8 shadow-sm border border-stone-100 cursor-pointer hover:border-stone-200 lg:translate-y-12" data-hbs-id="vsqiuiq">
|
||||||
|
<!-- Decorative quote mark -->
|
||||||
|
<div class="quote-mark absolute -top-4 -left-2 text-8xl font-serif text-stone-100 select-none" data-hbs-id="gd3rar9">"</div>
|
||||||
|
|
||||||
|
<!-- Rating -->
|
||||||
|
<div class="flex gap-1 mb-6 relative z-10" data-hbs-id="mfbu6rm">
|
||||||
|
<svg class="w-4 h-4 text-amber-400" fill="currentColor" viewBox="0 0 20 20" data-hbs-id="0jdtpzu"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
|
||||||
|
<svg class="w-4 h-4 text-amber-400" fill="currentColor" viewBox="0 0 20 20" data-hbs-id="3rm0obb"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
|
||||||
|
<svg class="w-4 h-4 text-amber-400" fill="currentColor" viewBox="0 0 20 20" data-hbs-id="q79o1g3"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
|
||||||
|
<svg class="w-4 h-4 text-amber-400" fill="currentColor" viewBox="0 0 20 20" data-hbs-id="bm3tfjo"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
|
||||||
|
<svg class="w-4 h-4 text-amber-400" fill="currentColor" viewBox="0 0 20 20" data-hbs-id="83z8anf"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Review text -->
|
||||||
|
<p class="text-stone-600 leading-relaxed mb-8 relative z-10 text-lg" data-hbs-id="em1klgt">
|
||||||
|
Exceptional craftsmanship and a truly collaborative process. They understood our vision from day one and
|
||||||
|
<span class="relative inline" data-hbs-id="vs1w4ij">
|
||||||
|
<span class="relative z-10 font-medium text-stone-900" data-hbs-id="jow3nez">delivered something extraordinary</span>
|
||||||
|
<span class="highlight-bar absolute bottom-0 left-0 w-full h-2 bg-amber-200/60" data-hbs-id="nbxha59"></span>
|
||||||
|
</span>.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<!-- Author info -->
|
||||||
|
<div class="flex items-center gap-4 relative z-10" data-hbs-id="8b8hxlq">
|
||||||
|
<div class="avatar w-14 h-14 rounded-2xl bg-gradient-to-br from-stone-800 to-stone-600 flex items-center justify-center text-white font-semibold text-sm shadow-lg shadow-stone-300/30" data-hbs-id="t7gvwrp">
|
||||||
|
JC
|
||||||
|
</div>
|
||||||
|
<div data-hbs-id="psmjmpu">
|
||||||
|
<h4 class="font-semibold text-stone-900 tracking-tight" data-hbs-id="eqbyh8x">James Chen</h4>
|
||||||
|
<p class="text-stone-500 text-sm" data-hbs-id="9piacgg">Founder, Velocity Labs</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Hover accent line -->
|
||||||
|
<div class="accent-line absolute bottom-0 left-8 right-8 h-1 bg-gradient-to-r from-amber-400 to-orange-400 rounded-full" data-hbs-id="r3ve4dz"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Review Card 3 -->
|
||||||
|
<div class="review-card group relative bg-white rounded-3xl p-8 shadow-sm border border-stone-100 cursor-pointer hover:border-stone-200" data-hbs-id="w9kw1qh">
|
||||||
|
<!-- Decorative quote mark -->
|
||||||
|
<div class="quote-mark absolute -top-4 -left-2 text-8xl font-serif text-stone-100 select-none" data-hbs-id="k7l263e">"</div>
|
||||||
|
|
||||||
|
<!-- Rating -->
|
||||||
|
<div class="flex gap-1 mb-6 relative z-10" data-hbs-id="jqsj2he">
|
||||||
|
<svg class="w-4 h-4 text-amber-400" fill="currentColor" viewBox="0 0 20 20" data-hbs-id="qldvdgk"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
|
||||||
|
<svg class="w-4 h-4 text-amber-400" fill="currentColor" viewBox="0 0 20 20" data-hbs-id="pqkbiqs"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
|
||||||
|
<svg class="w-4 h-4 text-amber-400" fill="currentColor" viewBox="0 0 20 20" data-hbs-id="vfa6ch1"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
|
||||||
|
<svg class="w-4 h-4 text-amber-400" fill="currentColor" viewBox="0 0 20 20" data-hbs-id="daspxc6"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
|
||||||
|
<svg class="w-4 h-4 text-amber-400" fill="currentColor" viewBox="0 0 20 20" data-hbs-id="hfelptc"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Review text -->
|
||||||
|
<p class="text-stone-600 leading-relaxed mb-8 relative z-10 text-lg" data-hbs-id="njlcb7b">
|
||||||
|
The level of sophistication and innovation they brought to our project was remarkable. A
|
||||||
|
<span class="relative inline" data-hbs-id="4i6u4de">
|
||||||
|
<span class="relative z-10 font-medium text-stone-900" data-hbs-id="vxqapfm">game-changer for our brand identity</span>
|
||||||
|
<span class="highlight-bar absolute bottom-0 left-0 w-full h-2 bg-amber-200/60" data-hbs-id="riz7jcb"></span>
|
||||||
|
</span>.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<!-- Author info -->
|
||||||
|
<div class="flex items-center gap-4 relative z-10" data-hbs-id="y19as90">
|
||||||
|
<div class="avatar w-14 h-14 rounded-2xl bg-gradient-to-br from-stone-800 to-stone-600 flex items-center justify-center text-white font-semibold text-sm shadow-lg shadow-stone-300/30" data-hbs-id="1ev8crq">
|
||||||
|
ER
|
||||||
|
</div>
|
||||||
|
<div data-hbs-id="ffctztv">
|
||||||
|
<h4 class="font-semibold text-stone-900 tracking-tight" data-hbs-id="qu5ny4d">Elena Rodriguez</h4>
|
||||||
|
<p class="text-stone-500 text-sm" data-hbs-id="6jdcozn">Creative Director, Mosaic Co</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Hover accent line -->
|
||||||
|
<div class="accent-line absolute bottom-0 left-8 right-8 h-1 bg-gradient-to-r from-amber-400 to-orange-400 rounded-full" data-hbs-id="a64fqe0"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Review Card 4 (offset) -->
|
||||||
|
<div class="review-card group relative bg-white rounded-3xl p-8 shadow-sm border border-stone-100 cursor-pointer hover:border-stone-200 lg:translate-y-12" data-hbs-id="s0gogbk">
|
||||||
|
<!-- Decorative quote mark -->
|
||||||
|
<div class="quote-mark absolute -top-4 -left-2 text-8xl font-serif text-stone-100 select-none" data-hbs-id="nn2i7ge">"</div>
|
||||||
|
|
||||||
|
<!-- Rating -->
|
||||||
|
<div class="flex gap-1 mb-6 relative z-10" data-hbs-id="76pggoh">
|
||||||
|
<svg class="w-4 h-4 text-amber-400" fill="currentColor" viewBox="0 0 20 20" data-hbs-id="behy86l"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
|
||||||
|
<svg class="w-4 h-4 text-amber-400" fill="currentColor" viewBox="0 0 20 20" data-hbs-id="scnpka5"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
|
||||||
|
<svg class="w-4 h-4 text-amber-400" fill="currentColor" viewBox="0 0 20 20" data-hbs-id="x1l6etw"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
|
||||||
|
<svg class="w-4 h-4 text-amber-400" fill="currentColor" viewBox="0 0 20 20" data-hbs-id="dybcvh2"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
|
||||||
|
<svg class="w-4 h-4 text-amber-400" fill="currentColor" viewBox="0 0 20 20" data-hbs-id="rawhdji"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Review text -->
|
||||||
|
<p class="text-stone-600 leading-relaxed mb-8 relative z-10 text-lg" data-hbs-id="rwc129k">
|
||||||
|
Impeccable execution from concept to launch. Their
|
||||||
|
<span class="relative inline" data-hbs-id="4kj40jj">
|
||||||
|
<span class="relative z-10 font-medium text-stone-900" data-hbs-id="54u1ebb">technical expertise combined with design sensibility</span>
|
||||||
|
<span class="highlight-bar absolute bottom-0 left-0 w-full h-2 bg-amber-200/60" data-hbs-id="m3iiyd5"></span>
|
||||||
|
</span>
|
||||||
|
is truly rare to find.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<!-- Author info -->
|
||||||
|
<div class="flex items-center gap-4 relative z-10" data-hbs-id="byqs0az">
|
||||||
|
<div class="avatar w-14 h-14 rounded-2xl bg-gradient-to-br from-stone-800 to-stone-600 flex items-center justify-center text-white font-semibold text-sm shadow-lg shadow-stone-300/30" data-hbs-id="6qltg6t">
|
||||||
|
MW
|
||||||
|
</div>
|
||||||
|
<div data-hbs-id="fhnzbml">
|
||||||
|
<h4 class="font-semibold text-stone-900 tracking-tight" data-hbs-id="y6wlh0o">Marcus Webb</h4>
|
||||||
|
<p class="text-stone-500 text-sm" data-hbs-id="uc4u8rf">CTO, NexGen Solutions</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Hover accent line -->
|
||||||
|
<div class="accent-line absolute bottom-0 left-8 right-8 h-1 bg-gradient-to-r from-amber-400 to-orange-400 rounded-full" data-hbs-id="b6lrrj6"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Bottom CTA section -->
|
||||||
|
<div class="mt-24 text-center" data-hbs-id="ch5ffpk">
|
||||||
|
<div class="inline-flex flex-col sm:flex-row items-center gap-6 bg-stone-900 rounded-3xl p-8 sm:p-6 sm:pr-8 shadow-2xl shadow-stone-400/20" data-hbs-id="2ns2eqr">
|
||||||
|
<div class="flex -space-x-3" data-hbs-id="ko9bg75">
|
||||||
|
<div class="w-12 h-12 rounded-full bg-gradient-to-br from-amber-400 to-orange-500 border-2 border-stone-900 flex items-center justify-center text-stone-900 font-semibold text-xs shadow-lg z-40" data-hbs-id="dukuhbp">
|
||||||
|
SM
|
||||||
|
</div>
|
||||||
|
<div class="w-12 h-12 rounded-full bg-gradient-to-br from-amber-400 to-orange-500 border-2 border-stone-900 flex items-center justify-center text-stone-900 font-semibold text-xs shadow-lg z-30" data-hbs-id="j5q6zr0">
|
||||||
|
JC
|
||||||
|
</div>
|
||||||
|
<div class="w-12 h-12 rounded-full bg-gradient-to-br from-amber-400 to-orange-500 border-2 border-stone-900 flex items-center justify-center text-stone-900 font-semibold text-xs shadow-lg z-20" data-hbs-id="ipnxdaw">
|
||||||
|
ER
|
||||||
|
</div>
|
||||||
|
<div class="w-12 h-12 rounded-full bg-gradient-to-br from-amber-400 to-orange-500 border-2 border-stone-900 flex items-center justify-center text-stone-900 font-semibold text-xs shadow-lg z-10" data-hbs-id="djlkmbv">
|
||||||
|
MW
|
||||||
|
</div>
|
||||||
|
<div class="w-12 h-12 rounded-full bg-stone-700 border-2 border-stone-900 flex items-center justify-center text-white text-sm font-medium z-0" data-hbs-id="ma63hr7">
|
||||||
|
+50
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="text-center sm:text-left" data-hbs-id="4faibl8">
|
||||||
|
<p class="text-white font-semibold" data-hbs-id="grkbxzw">Join 50+ satisfied clients</p>
|
||||||
|
<p class="text-stone-400 text-sm" data-hbs-id="9q1n1rp">Start your journey today</p>
|
||||||
|
</div>
|
||||||
|
<button class="bg-white text-stone-900 px-6 py-3 rounded-xl font-semibold hover:bg-amber-400 transition-colors duration-300 shadow-lg" data-hbs-id="cjoxgpp">
|
||||||
|
Get Started
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
Reference in New Issue
Block a user