Skip to content

Commit 6d68665

Browse files
steipetesteipete
committed
feat: add testimonials carousel with X quotes
- Add testimonials.json with 17 user quotes and X links - Two-row marquee carousel with opposite scroll directions - Round avatars via unavatar.io, cards link to original posts - Pause on hover, gradient fade edges, mobile responsive
1 parent 414bf07 commit 6d68665

2 files changed

Lines changed: 284 additions & 0 deletions

File tree

‎src/data/testimonials.json‎

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
[
2+
{
3+
"quote": "whatever you have built is pure magic with @clawdbot my mind is f'in blown and can't stop playing with this.",
4+
"author": "Abhay08",
5+
"url": "https://x.com/Abhay08/status/2009639451824390560"
6+
},
7+
{
8+
"quote": "Honestly, @clawdbot is super powerful because of its ease of use. It literally just connected to JIRA and built a skill since it wasn't on @clawdhub yet. Look how simple it was",
9+
"author": "jdrhyne",
10+
"url": "https://x.com/jdrhyne/status/2008336434827002232"
11+
},
12+
{
13+
"quote": "Obsessed with @clawdbot",
14+
"author": "danlozanov",
15+
"url": "https://x.com/danlozanov/status/2009429812524536058"
16+
},
17+
{
18+
"quote": "people's version of Poki",
19+
"author": "mukhtharcm",
20+
"url": "https://x.com/mukhtharcm/status/2008576234255774104"
21+
},
22+
{
23+
"quote": "Feeling like iron man",
24+
"author": "MahmoudAshraf93",
25+
"url": "https://x.com/MahmoudAshraf93/status/2008249968155652457"
26+
},
27+
{
28+
"quote": "This is sick",
29+
"author": "onusoz",
30+
"url": "https://x.com/onusoz/status/2008189458777305499"
31+
},
32+
{
33+
"quote": "It's handling my emails, calendar events, tasks and can API into any other tools",
34+
"author": "heyitsyashu",
35+
"url": "https://x.com/heyitsyashu/status/2008563498423591398"
36+
},
37+
{
38+
"quote": "What @steipete has built with @clawdbot is out of this world.",
39+
"author": "KrauseFx",
40+
"url": "https://x.com/KrauseFx/status/2008531076487246176"
41+
},
42+
{
43+
"quote": "I not only did not open an IDE, I did not touch a terminal since last night, thanks to @steipete's @clawdbot",
44+
"author": "onusoz",
45+
"url": "https://x.com/onusoz/status/2008456860580397437"
46+
},
47+
{
48+
"quote": "this shit is amazing!",
49+
"author": "chrisrodz35",
50+
"url": "https://x.com/chrisrodz35/status/2009431826117378529"
51+
},
52+
{
53+
"quote": "I'm giving my wife the gift of @clawdbot with Waitrose shopping skill this Christmas",
54+
"author": "jonas",
55+
"url": "https://x.com/jonas/status/2002853469733183934"
56+
},
57+
{
58+
"quote": "First couple days using @clawdbot have been amazing.",
59+
"author": "jlehman_",
60+
"url": "https://x.com/jlehman_/status/2008643709664100545"
61+
},
62+
{
63+
"quote": "@clawdbot has done my taxes... @steipete really cooked here",
64+
"author": "sharoni_k",
65+
"url": "https://x.com/sharoni_k/status/2009016634619707501"
66+
},
67+
{
68+
"quote": "Cleared 10,000+ emails from my inbox (45% reduction!)",
69+
"author": "jdrhyne",
70+
"url": "https://x.com/jdrhyne/status/2008308759001788812"
71+
},
72+
{
73+
"quote": "At this point, if you don't have @clawdbot and at least 3 long running agents, you are not hireable and generally cannot be even called an it engineer anymore.",
74+
"author": "neoromantic",
75+
"url": "https://x.com/neoromantic/status/2008800724537536965"
76+
},
77+
{
78+
"quote": "Most interesting real world application for LLMs right now",
79+
"author": "chrisdietr",
80+
"url": "https://x.com/chrisdietr/status/2009118722695553363"
81+
},
82+
{
83+
"quote": "World is not ready for @clawdbot",
84+
"author": "onusoz",
85+
"url": "https://x.com/onusoz/status/2008966462887874568"
86+
}
87+
]

‎src/pages/index.astro‎

Lines changed: 197 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,10 @@
11
---
22
import Layout from '../layouts/Layout.astro';
3+
import testimonials from '../data/testimonials.json';
4+
5+
// Duplicate for seamless loop
6+
const row1 = [...testimonials.slice(0, 9), ...testimonials.slice(0, 9)];
7+
const row2 = [...testimonials.slice(9), ...testimonials.slice(9)];
38
---
49

510
<Layout title="Clawdbot — Personal AI Assistant">
@@ -165,6 +170,47 @@ import Layout from '../layouts/Layout.astro';
165170
});
166171
</script>
167172

173+
<!-- Testimonials -->
174+
<section class="testimonials">
175+
<h2 class="section-title">
176+
<span class="claw-accent">⟩</span> What People Say
177+
</h2>
178+
<div class="testimonials-track">
179+
<div class="testimonials-row row-1">
180+
{row1.map((t) => (
181+
<a href={t.url} target="_blank" rel="noopener" class="testimonial-card">
182+
<img
183+
src={`https://unavatar.io/x/${t.author}`}
184+
alt={t.author}
185+
class="testimonial-avatar"
186+
loading="lazy"
187+
/>
188+
<div class="testimonial-content">
189+
<p class="testimonial-quote">"{t.quote}"</p>
190+
<span class="testimonial-author">@{t.author}</span>
191+
</div>
192+
</a>
193+
))}
194+
</div>
195+
<div class="testimonials-row row-2">
196+
{row2.map((t) => (
197+
<a href={t.url} target="_blank" rel="noopener" class="testimonial-card">
198+
<img
199+
src={`https://unavatar.io/x/${t.author}`}
200+
alt={t.author}
201+
class="testimonial-avatar"
202+
loading="lazy"
203+
/>
204+
<div class="testimonial-content">
205+
<p class="testimonial-quote">"{t.quote}"</p>
206+
<span class="testimonial-author">@{t.author}</span>
207+
</div>
208+
</a>
209+
))}
210+
</div>
211+
</div>
212+
</section>
213+
168214
<!-- Footer -->
169215
<footer class="footer">
170216
<p>Built by Clawd 🦞, a space lobster AI assistant with a <a href="https://soul.md" target="_blank" rel="noopener">soul</a>, by <a href="https://steipete.me" target="_blank" rel="noopener">Peter Steinberger</a> & <a href="https://github.com/clawdbot/clawdbot#community" target="_blank" rel="noopener">community</a>.</p>
@@ -559,6 +605,127 @@ import Layout from '../layouts/Layout.astro';
559605
}
560606

561607

608+
/* Testimonials */
609+
.testimonials {
610+
margin-bottom: 56px;
611+
animation: fadeInUp 0.8s ease-out 0.75s both;
612+
overflow: hidden;
613+
margin-left: -24px;
614+
margin-right: -24px;
615+
padding: 0 24px;
616+
}
617+
618+
.testimonials .section-title {
619+
padding-left: 24px;
620+
}
621+
622+
.testimonials-track {
623+
display: flex;
624+
flex-direction: column;
625+
gap: 8px;
626+
margin-left: -24px;
627+
margin-right: -24px;
628+
overflow: hidden;
629+
mask-image: linear-gradient(
630+
to right,
631+
transparent,
632+
black 5%,
633+
black 95%,
634+
transparent
635+
);
636+
-webkit-mask-image: linear-gradient(
637+
to right,
638+
transparent,
639+
black 5%,
640+
black 95%,
641+
transparent
642+
);
643+
}
644+
645+
.testimonials-row {
646+
display: flex;
647+
gap: 16px;
648+
width: max-content;
649+
padding: 8px 0;
650+
}
651+
652+
.row-1 {
653+
animation: scroll-left 60s linear infinite;
654+
}
655+
656+
.row-2 {
657+
animation: scroll-right 50s linear infinite;
658+
}
659+
660+
@keyframes scroll-left {
661+
from { transform: translateX(0); }
662+
to { transform: translateX(-50%); }
663+
}
664+
665+
@keyframes scroll-right {
666+
from { transform: translateX(-50%); }
667+
to { transform: translateX(0); }
668+
}
669+
670+
.testimonial-card {
671+
display: flex;
672+
align-items: flex-start;
673+
gap: 12px;
674+
padding: 16px;
675+
min-width: 320px;
676+
max-width: 400px;
677+
border-radius: 12px;
678+
border: 1px solid var(--border-subtle);
679+
background: rgba(10, 15, 26, 0.7);
680+
backdrop-filter: blur(8px);
681+
text-decoration: none;
682+
color: var(--text-primary);
683+
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
684+
flex-shrink: 0;
685+
}
686+
687+
.testimonial-card:hover {
688+
border-color: var(--coral-bright);
689+
transform: translateY(-2px);
690+
box-shadow: 0 8px 24px rgba(255, 77, 77, 0.15);
691+
}
692+
693+
.testimonials-row:hover {
694+
animation-play-state: paused;
695+
}
696+
697+
.testimonial-avatar {
698+
width: 44px;
699+
height: 44px;
700+
border-radius: 50%;
701+
flex-shrink: 0;
702+
border: 2px solid var(--border-subtle);
703+
background: var(--bg-elevated);
704+
}
705+
706+
.testimonial-content {
707+
display: flex;
708+
flex-direction: column;
709+
gap: 6px;
710+
min-width: 0;
711+
}
712+
713+
.testimonial-quote {
714+
font-size: 0.9rem;
715+
line-height: 1.5;
716+
color: var(--text-secondary);
717+
display: -webkit-box;
718+
-webkit-line-clamp: 3;
719+
-webkit-box-orient: vertical;
720+
overflow: hidden;
721+
}
722+
723+
.testimonial-author {
724+
font-size: 0.8rem;
725+
font-weight: 600;
726+
color: var(--coral-bright);
727+
}
728+
562729
/* Responsive */
563730
@media (max-width: 480px) {
564731
.container {
@@ -577,5 +744,35 @@ import Layout from '../layouts/Layout.astro';
577744
.cta-label {
578745
font-size: 0.9rem;
579746
}
747+
748+
.testimonials {
749+
margin-left: -16px;
750+
margin-right: -16px;
751+
padding: 0 16px;
752+
}
753+
754+
.testimonials .section-title {
755+
padding-left: 16px;
756+
}
757+
758+
.testimonials-track {
759+
margin-left: -16px;
760+
margin-right: -16px;
761+
}
762+
763+
.testimonial-card {
764+
min-width: 280px;
765+
max-width: 320px;
766+
padding: 12px;
767+
}
768+
769+
.testimonial-avatar {
770+
width: 36px;
771+
height: 36px;
772+
}
773+
774+
.testimonial-quote {
775+
font-size: 0.85rem;
776+
}
580777
}
581778
</style>

0 commit comments

Comments
 (0)