Skip to content

Commit fef7ea2

Browse files
committed
feat: add prominent explore banner and new testimonials
- Add horizontal banner-style navigation above footer with icons - Three cards: Integrations, Shoutouts, Showcase - Consistent hover animations with other cards - Mobile responsive (single column on small screens) - Add testimonials from @coyotevn and @AlbertMoral
1 parent 6092022 commit fef7ea2

File tree

2 files changed

+94
-7
lines changed

2 files changed

+94
-7
lines changed

src/data/testimonials.json

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,14 @@
11
[
2+
{
3+
"quote": "It is one of the most delightful thing (app, agent, product) I've used in a few years.",
4+
"author": "coyotevn",
5+
"url": "https://x.com/coyotevn/status/2010270055985295529"
6+
},
7+
{
8+
"quote": "Just set up @clawdbot on my Raspberry Pi with Cloudflare, and it feels magical. Built a website from my phone in minutes and connected WHOOP to check my metrics.",
9+
"author": "AlbertMoral",
10+
"url": "https://x.com/AlbertMoral/status/2010288787885064227"
11+
},
212
{
313
"quote": "What @steipete has built with @clawdbot is out of this world.",
414
"author": "KrauseFx",

src/pages/index.astro

Lines changed: 84 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -460,15 +460,35 @@ const duration2 = (row2.length / 2 * pixelsPerItem) / pixelsPerSecond;
460460
</a>
461461
</nav>
462462

463+
<!-- Explore More Banner -->
464+
<section class="explore-banner">
465+
<div class="explore-links">
466+
<a href="/integrations" class="explore-link">
467+
<svg class="explore-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
468+
<circle cx="12" cy="12" r="3"/><path d="M12 1v6m0 6v6m5.2-13.2l-4.2 4.2m0 6l4.2 4.2M23 12h-6m-6 0H1m18.2-5.2l-4.2 4.2m0 6l4.2 4.2"/>
469+
</svg>
470+
<span class="explore-label">Integrations</span>
471+
<span class="explore-desc">50+ apps & services</span>
472+
</a>
473+
<a href="/shoutouts" class="explore-link">
474+
<svg class="explore-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
475+
<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
476+
</svg>
477+
<span class="explore-label">Shoutouts</span>
478+
<span class="explore-desc">Community love</span>
479+
</a>
480+
<a href="https://docs.clawd.bot/start/showcase" target="_blank" rel="noopener" class="explore-link">
481+
<svg class="explore-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
482+
<polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/>
483+
</svg>
484+
<span class="explore-label">Showcase</span>
485+
<span class="explore-desc">Impressive builds</span>
486+
</a>
487+
</div>
488+
</section>
489+
463490
<!-- Footer -->
464491
<footer class="footer">
465-
<nav class="footer-nav">
466-
<a href="/integrations">Integrations</a>
467-
<span class="footer-separator">·</span>
468-
<a href="/shoutouts">Shoutouts</a>
469-
<span class="footer-separator">·</span>
470-
<a href="https://docs.clawd.bot/start/showcase" target="_blank" rel="noopener">Showcase</a>
471-
</nav>
472492
<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>
473493
</footer>
474494
</main>
@@ -1203,6 +1223,59 @@ const duration2 = (row2.length / 2 * pixelsPerItem) / pixelsPerSecond;
12031223
color: var(--coral-bright);
12041224
}
12051225

1226+
/* Explore Banner */
1227+
.explore-banner {
1228+
margin: 56px 0 40px 0;
1229+
animation: fadeInUp 0.8s ease-out 0.8s both;
1230+
}
1231+
1232+
.explore-links {
1233+
display: grid;
1234+
grid-template-columns: repeat(3, 1fr);
1235+
gap: 20px;
1236+
}
1237+
1238+
.explore-link {
1239+
display: flex;
1240+
flex-direction: column;
1241+
align-items: center;
1242+
text-align: center;
1243+
padding: 32px 24px;
1244+
border-radius: 16px;
1245+
border: 1px solid var(--border-subtle);
1246+
background: rgba(10, 15, 26, 0.6);
1247+
backdrop-filter: blur(12px);
1248+
text-decoration: none;
1249+
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
1250+
}
1251+
1252+
.explore-link:hover {
1253+
transform: translateY(-4px);
1254+
border-color: var(--coral-bright);
1255+
box-shadow: 0 12px 40px color-mix(in srgb, var(--coral-bright) 20%, transparent);
1256+
}
1257+
1258+
.explore-icon {
1259+
width: 40px;
1260+
height: 40px;
1261+
color: var(--coral-bright);
1262+
margin-bottom: 16px;
1263+
stroke-width: 2;
1264+
}
1265+
1266+
.explore-label {
1267+
font-family: var(--font-display);
1268+
font-size: 1.2rem;
1269+
font-weight: 600;
1270+
color: var(--text-primary);
1271+
margin-bottom: 8px;
1272+
}
1273+
1274+
.explore-desc {
1275+
font-size: 0.9rem;
1276+
color: var(--text-muted);
1277+
}
1278+
12061279
/* Responsive */
12071280
@media (max-width: 480px) {
12081281
.container {
@@ -1251,5 +1324,9 @@ const duration2 = (row2.length / 2 * pixelsPerItem) / pixelsPerSecond;
12511324
.testimonial-quote {
12521325
font-size: 0.85rem;
12531326
}
1327+
1328+
.explore-links {
1329+
grid-template-columns: 1fr;
1330+
}
12541331
}
12551332
</style>

0 commit comments

Comments
 (0)