Skip to content

Commit 938c658

Browse files
steipetesteipete
committed
feat: add shoutouts page with all testimonials grid
1 parent 5f28c39 commit 938c658

2 files changed

Lines changed: 250 additions & 9 deletions

File tree

‎src/pages/index.astro‎

Lines changed: 18 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -227,10 +227,12 @@ const duration2 = (row2.length / 2 * pixelsPerItem) / pixelsPerSecond;
227227
</div>
228228
</section>
229229

230-
<!-- Showcase Link -->
231-
<p class="showcase-link">
232-
<a href="https://docs.clawd.bot/start/showcase" target="_blank" rel="noopener">See what people built</a>
233-
</p>
230+
<!-- Shoutouts & Showcase Links -->
231+
<div class="bottom-links">
232+
<a href="/shoutouts" class="bottom-link">All shoutouts</a>
233+
<span class="link-separator">·</span>
234+
<a href="https://docs.clawd.bot/start/showcase" target="_blank" rel="noopener" class="bottom-link">See what people built</a>
235+
</div>
234236

235237
<!-- Footer -->
236238
<footer class="footer">
@@ -626,26 +628,33 @@ const duration2 = (row2.length / 2 * pixelsPerItem) / pixelsPerSecond;
626628
}
627629

628630

629-
/* Showcase Link */
630-
.showcase-link {
631+
/* Bottom Links */
632+
.bottom-links {
631633
text-align: center;
632634
font-size: 0.95rem;
633-
color: var(--text-muted);
634635
margin-bottom: 40px;
635636
animation: fadeInUp 0.8s ease-out 0.7s both;
637+
display: flex;
638+
justify-content: center;
639+
align-items: center;
640+
gap: 12px;
636641
}
637642

638-
.showcase-link a {
643+
.bottom-link {
639644
color: var(--coral-bright);
640645
text-decoration: none;
641646
font-weight: 500;
642647
transition: color 0.2s ease;
643648
}
644649

645-
.showcase-link a:hover {
650+
.bottom-link:hover {
646651
color: var(--cyan-bright);
647652
}
648653

654+
.link-separator {
655+
color: var(--text-muted);
656+
}
657+
649658
/* Testimonials */
650659
.testimonials {
651660
margin-bottom: 56px;

‎src/pages/shoutouts.astro‎

Lines changed: 232 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,232 @@
1+
---
2+
import Layout from '../layouts/Layout.astro';
3+
import testimonials from '../data/testimonials.json';
4+
import extraTestimonials from '../data/testimonials-extra.json';
5+
6+
// Combine all testimonials
7+
const allTestimonials = [...testimonials, ...extraTestimonials];
8+
---
9+
10+
<Layout title="Shoutouts — Clawdbot">
11+
<div class="stars"></div>
12+
<div class="nebula"></div>
13+
14+
<main class="container">
15+
<header class="header">
16+
<a href="/" class="back-link">← Back to home</a>
17+
<h1 class="title">
18+
<span class="claw-accent">⟩</span> Shoutouts
19+
</h1>
20+
<p class="subtitle">What the community is saying about Clawdbot</p>
21+
</header>
22+
23+
<div class="shoutouts-grid">
24+
{allTestimonials.map((t) => (
25+
<a href={t.url} target="_blank" rel="noopener" class="shoutout-card">
26+
<img
27+
src={`https://unavatar.io/x/${t.author}`}
28+
alt={t.author}
29+
class="shoutout-avatar"
30+
loading="lazy"
31+
/>
32+
<div class="shoutout-content">
33+
<p class="shoutout-quote">"{t.quote}"</p>
34+
<span class="shoutout-author">@{t.author}</span>
35+
</div>
36+
</a>
37+
))}
38+
</div>
39+
40+
<footer class="footer">
41+
<p>Built by <a href="https://clawd.me" target="_blank" rel="noopener">Clawd</a> 🦞, a space lobster AI 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>
42+
</footer>
43+
</main>
44+
</Layout>
45+
46+
<style>
47+
/* Starfield Background */
48+
.stars {
49+
position: fixed;
50+
inset: 0;
51+
background-image:
52+
radial-gradient(2px 2px at 20px 30px, rgba(255,255,255,0.8), transparent),
53+
radial-gradient(2px 2px at 40px 70px, rgba(255,255,255,0.5), transparent),
54+
radial-gradient(1px 1px at 90px 40px, rgba(255,255,255,0.6), transparent),
55+
radial-gradient(2px 2px at 130px 80px, rgba(255,255,255,0.4), transparent),
56+
radial-gradient(1px 1px at 160px 120px, rgba(255,255,255,0.7), transparent),
57+
radial-gradient(2px 2px at 200px 60px, rgba(0,229,204,0.6), transparent),
58+
radial-gradient(1px 1px at 250px 150px, rgba(255,255,255,0.5), transparent),
59+
radial-gradient(2px 2px at 300px 40px, rgba(255,77,77,0.4), transparent);
60+
background-size: 350px 200px;
61+
animation: twinkle 8s ease-in-out infinite alternate;
62+
pointer-events: none;
63+
z-index: 0;
64+
}
65+
66+
@keyframes twinkle {
67+
0% { opacity: 0.4; }
68+
100% { opacity: 0.7; }
69+
}
70+
71+
/* Nebula Gradient */
72+
.nebula {
73+
position: fixed;
74+
inset: 0;
75+
background:
76+
radial-gradient(ellipse 80% 50% at 20% 20%, rgba(255, 77, 77, 0.12), transparent 50%),
77+
radial-gradient(ellipse 60% 60% at 80% 30%, rgba(0, 229, 204, 0.08), transparent 50%),
78+
radial-gradient(ellipse 90% 70% at 50% 90%, rgba(255, 77, 77, 0.06), transparent 50%);
79+
pointer-events: none;
80+
z-index: 0;
81+
}
82+
83+
.container {
84+
position: relative;
85+
z-index: 1;
86+
max-width: 1200px;
87+
margin: 0 auto;
88+
padding: 40px 24px;
89+
min-height: 100vh;
90+
display: flex;
91+
flex-direction: column;
92+
}
93+
94+
.header {
95+
text-align: center;
96+
margin-bottom: 48px;
97+
animation: fadeInUp 0.6s ease-out;
98+
}
99+
100+
@keyframes fadeInUp {
101+
from {
102+
opacity: 0;
103+
transform: translateY(20px);
104+
}
105+
to {
106+
opacity: 1;
107+
transform: translateY(0);
108+
}
109+
}
110+
111+
.back-link {
112+
display: inline-block;
113+
margin-bottom: 24px;
114+
color: var(--text-muted);
115+
text-decoration: none;
116+
font-size: 0.9rem;
117+
transition: color 0.2s ease;
118+
}
119+
120+
.back-link:hover {
121+
color: var(--coral-bright);
122+
}
123+
124+
.title {
125+
font-family: var(--font-display);
126+
font-size: clamp(2rem, 6vw, 3rem);
127+
font-weight: 700;
128+
margin-bottom: 12px;
129+
color: var(--text-primary);
130+
}
131+
132+
.claw-accent {
133+
color: var(--coral-bright);
134+
}
135+
136+
.subtitle {
137+
color: var(--text-secondary);
138+
font-size: 1.1rem;
139+
}
140+
141+
.shoutouts-grid {
142+
display: grid;
143+
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
144+
gap: 20px;
145+
animation: fadeInUp 0.6s ease-out 0.15s both;
146+
}
147+
148+
.shoutout-card {
149+
display: flex;
150+
align-items: flex-start;
151+
gap: 14px;
152+
padding: 20px;
153+
border-radius: 14px;
154+
border: 1px solid var(--border-subtle);
155+
background: rgba(10, 15, 26, 0.7);
156+
backdrop-filter: blur(8px);
157+
text-decoration: none;
158+
color: var(--text-primary);
159+
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
160+
}
161+
162+
.shoutout-card:hover {
163+
border-color: var(--coral-bright);
164+
transform: translateY(-3px);
165+
box-shadow: 0 12px 32px rgba(255, 77, 77, 0.15);
166+
}
167+
168+
.shoutout-avatar {
169+
width: 48px;
170+
height: 48px;
171+
border-radius: 50%;
172+
flex-shrink: 0;
173+
border: 2px solid var(--border-subtle);
174+
background: var(--bg-elevated);
175+
}
176+
177+
.shoutout-content {
178+
display: flex;
179+
flex-direction: column;
180+
gap: 8px;
181+
min-width: 0;
182+
}
183+
184+
.shoutout-quote {
185+
font-size: 0.95rem;
186+
line-height: 1.55;
187+
color: var(--text-secondary);
188+
}
189+
190+
.shoutout-author {
191+
font-size: 0.85rem;
192+
font-weight: 600;
193+
color: var(--coral-bright);
194+
}
195+
196+
.footer {
197+
margin-top: auto;
198+
padding-top: 48px;
199+
text-align: center;
200+
font-size: 0.9rem;
201+
color: var(--text-muted);
202+
}
203+
204+
.footer a {
205+
color: var(--coral-bright);
206+
text-decoration: none;
207+
transition: color 0.2s ease;
208+
}
209+
210+
.footer a:hover {
211+
color: var(--cyan-bright);
212+
}
213+
214+
@media (max-width: 480px) {
215+
.container {
216+
padding: 24px 16px;
217+
}
218+
219+
.shoutouts-grid {
220+
grid-template-columns: 1fr;
221+
}
222+
223+
.shoutout-card {
224+
padding: 16px;
225+
}
226+
227+
.shoutout-avatar {
228+
width: 40px;
229+
height: 40px;
230+
}
231+
}
232+
</style>

0 commit comments

Comments
 (0)