templates/hugo-saasify-theme
1
0
Fork 0
mirror of https://github.com/chaoming/hugo-saasify-theme.git synced 2025-04-20 19:01:52 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: convert testimonials section into reusable shortcode with animation support

Browse source
This commit is contained in:
Chaoming Li 2024-11-18 15:23:01 +11:00
parent 9cd9421a58
commit d5895dc0db
2 changed files with 88 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
layouts/index.html
View file

@ -4,29 +4,6 @@
{{ .Content }} {{ .Content }}
{{ end }} {{ end }}
<!-- Testimonials -->
<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">Loved by Teams Worldwide</h2>
<p class="text-xl text-gray-600">See what our customers have to say about their experience with our platform.</p>
</div>
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
<div class="card">
<div class="flex items-center space-x-4 mb-6">
<img src="{{ "images/testimonial-1.svg" | relURL }}" alt="Testimonial" class="w-12 h-12 rounded-full">
<div>
<h4 class="font-bold">John Smith</h4>
<p class="text-gray-600">Product Manager at Company</p>
</div>
</div>
<p class="text-gray-600">"This platform has transformed how we understand our users. The insights we've gained have been invaluable for our product development."</p>
</div>
</div>
</div>
</section>
<!-- CTA Section --> <!-- CTA Section -->
<section class="section bg-primary-600"> <section class="section bg-primary-600">
<div class="container"> <div class="container">

88
layouts/shortcodes/testimonials.html Normal file
View file

@ -0,0 +1,88 @@
<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>