mirror of
https://github.com/chaoming/hugo-saasify-theme.git
synced 2025-04-22 23:51:52 +02:00
89 lines
2.9 KiB
HTML
89 lines
2.9 KiB
HTML
|
<section class="section bg-gray-50">
|
||
|
|
<div class="container">
|
||
|
|
<div class="text-center max-w-3xl mx-auto mb-16">
|
||
|
|
<h2 class="text-3xl md:text-4xl font-bold mb-6">{{ .Get "title" | default "Loved by Teams Worldwide" }}</h2>
|
||
|
|
<p class="text-xl text-gray-600">{{ .Get "description" | default "See what our customers have to say about their experience with our platform." }}</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="testimonials-container overflow-hidden">
|
||
|
|
<div class="testimonials-track{{ if ne (.Get "animate" | default "true") "false" }} animate{{ end }}">
|
||
|
|
{{ range .Page.Params.testimonials }}
|
||
|
|
<div class="testimonial-card">
|
||
|
|
<div class="flex items-center space-x-4 mb-6">
|
||
|
|
<img src="{{ .avatar | relURL }}" alt="{{ .name }}" class="w-12 h-12 rounded-full">
|
||
|
|
<div>
|
||
|
|
<h4 class="font-bold">{{ .name }}</h4>
|
||
|
|
<p class="text-gray-600">{{ .title }}</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<p class="text-gray-600">{{ .quote }}</p>
|
||
|
|
</div>
|
||
|
|
{{ end }}
|
||
|
|
{{ if ne (.Get "animate" | default "true") "false" }}
|
||
|
|
{{ range .Page.Params.testimonials }}
|
||
|
|
<div class="testimonial-card">
|
||
|
|
<div class="flex items-center space-x-4 mb-6">
|
||
|
|
<img src="{{ .avatar | relURL }}" alt="{{ .name }}" class="w-12 h-12 rounded-full">
|
||
|
|
<div>
|
||
|
|
<h4 class="font-bold">{{ .name }}</h4>
|
||
|
|
<p class="text-gray-600">{{ .title }}</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<p class="text-gray-600">{{ .quote }}</p>
|
||
|
|
</div>
|
||
|
|
{{ end }}
|
||
|
|
{{ end }}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
.testimonials-container {
|
||
|
|
padding: 20px 0;
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
|
||
|
|
.testimonials-container.static {
|
||
|
|
display: grid;
|
||
|
|
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||
|
|
gap: 2rem;
|
||
|
|
overflow: visible;
|
||
|
|
}
|
||
|
|
|
||
|
|
.testimonials-track {
|
||
|
|
display: flex;
|
||
|
|
gap: 2rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.testimonials-track.animate {
|
||
|
|
animation: 40s testimonials-scroll infinite linear;
|
||
|
|
}
|
||
|
|
|
||
|
|
.testimonial-card {
|
||
|
|
flex: 0 0 auto;
|
||
|
|
width: 300px;
|
||
|
|
background: white;
|
||
|
|
padding: 2rem;
|
||
|
|
border-radius: 0.5rem;
|
||
|
|
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
||
|
|
}
|
||
|
|
|
||
|
|
.testimonials-container.static .testimonial-card {
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes testimonials-scroll {
|
||
|
|
from {
|
||
|
|
transform: translateX(0);
|
||
|
|
}
|
||
|
|
to {
|
||
|
|
transform: translateX(calc(-100% / 2));
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.testimonials-container:hover .testimonials-track.animate {
|
||
|
|
animation-play-state: paused;
|
||
|
|
}
|
||
|
|
</style>
|