Skip to content

Commit e4b74b8

Browse files
StrawbangStrawbang
committed
refactor: rework hero, philosophy, and founders UX
1 parent aa9ee28 commit e4b74b8

4 files changed

Lines changed: 295 additions & 119 deletions

File tree

‎src/components/Footer.astro‎

Lines changed: 151 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,68 +1,197 @@
11
---
2+
const founders = [
3+
{
4+
name: 'Djamel Bougouffa',
5+
github: 'https://github.com/Strawbang',
6+
linkedin: 'https://www.linkedin.com/in/djamel-bougouffa/',
7+
website: 'https://djamel-bougouffa.com/',
8+
},
9+
{
10+
name: 'Gokhan Kabar',
11+
github: 'https://github.com/GokhanKabar',
12+
linkedin: 'https://www.linkedin.com/in/gokhan-kabar/',
13+
website: 'https://gokhankabar.com/',
14+
},
15+
];
216
---
317

418
<footer>
519
<div class="footer-inner">
6-
<a href="/" class="footer-logo">rustkit<span>.</span>ai</a>
7-
<ul class="footer-links">
8-
<li><a href="https://github.com/rustkit-ai" target="_blank" rel="noopener">GitHub</a></li>
9-
<li><a href="https://github.com/rustkit-ai/memo" target="_blank" rel="noopener">memo</a></li>
10-
<li><a href="https://github.com/rustkit-ai/rustkit-mcp" target="_blank" rel="noopener">rustkit-mcp</a></li>
11-
</ul>
12-
<span class="footer-copy">© 2026 rustkit-ai</span>
20+
<div class="footer-left">
21+
<a href="/" class="footer-logo">rustkit<span>.</span>ai</a>
22+
<p class="footer-tagline">AI-native developer tools, built in Rust.</p>
23+
<div class="footer-founders">
24+
{founders.map((f) => (
25+
<div class="founder-row">
26+
<span class="founder-name">{f.name}</span>
27+
<div class="founder-socials">
28+
<a href={f.github} target="_blank" rel="noopener" aria-label="GitHub">
29+
<svg width="13" height="13" viewBox="0 0 24 24" fill="currentColor">
30+
<path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z"/>
31+
</svg>
32+
</a>
33+
<a href={f.linkedin} target="_blank" rel="noopener" aria-label="LinkedIn">
34+
<svg width="13" height="13" viewBox="0 0 24 24" fill="currentColor">
35+
<path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 01-2.063-2.065 2.064 2.064 0 112.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/>
36+
</svg>
37+
</a>
38+
<a href={f.website} target="_blank" rel="noopener" aria-label="Website">
39+
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
40+
<circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 014 10 15.3 15.3 0 01-4 10 15.3 15.3 0 01-4-10 15.3 15.3 0 014-10z"/>
41+
</svg>
42+
</a>
43+
</div>
44+
</div>
45+
))}
46+
</div>
47+
</div>
48+
49+
<div class="footer-right">
50+
<div class="footer-col">
51+
<div class="footer-col-title">Projects</div>
52+
<a href="https://github.com/rustkit-ai/memo" target="_blank" rel="noopener">memo</a>
53+
<a href="https://github.com/rustkit-ai/rustkit-mcp" target="_blank" rel="noopener">rustkit-mcp</a>
54+
<a href="https://github.com/rustkit-ai/rustkit-semantic" target="_blank" rel="noopener">rustkit-semantic</a>
55+
</div>
56+
<div class="footer-col">
57+
<div class="footer-col-title">Organization</div>
58+
<a href="https://github.com/rustkit-ai" target="_blank" rel="noopener">GitHub</a>
59+
<a href="https://github.com/rustkit-ai/memo/releases" target="_blank" rel="noopener">Releases</a>
60+
</div>
61+
</div>
62+
</div>
63+
64+
<div class="footer-bottom">
65+
<span>© 2026 rustkit-ai</span>
66+
<span>Built with <a href="https://astro.build" target="_blank" rel="noopener">Astro</a></span>
1367
</div>
1468
</footer>
1569

1670
<style>
1771
footer {
18-
padding: 3rem 2rem;
72+
padding: 3.5rem 2rem 2rem;
1973
border-top: 1px solid var(--border);
2074
}
2175

2276
.footer-inner {
2377
max-width: 900px;
2478
margin: 0 auto;
2579
display: flex;
26-
align-items: center;
2780
justify-content: space-between;
81+
gap: 3rem;
2882
flex-wrap: wrap;
29-
gap: 1.5rem;
83+
margin-bottom: 3rem;
3084
}
3185

86+
.footer-left { max-width: 300px; }
87+
3288
.footer-logo {
3389
font-family: 'Space Mono', monospace;
34-
font-size: 0.9rem;
35-
color: var(--text-muted);
90+
font-size: 1rem;
91+
color: var(--text);
3692
text-decoration: none;
3793
letter-spacing: -0.02em;
94+
display: block;
95+
margin-bottom: 0.5rem;
3896
}
3997

4098
.footer-logo span { color: var(--rust); }
4199

42-
.footer-links {
100+
.footer-tagline {
101+
font-size: 0.82rem;
102+
color: var(--text-dim);
103+
margin-bottom: 1.5rem;
104+
line-height: 1.6;
105+
}
106+
107+
.footer-founders {
108+
display: flex;
109+
flex-direction: column;
110+
gap: 0.6rem;
111+
}
112+
113+
.founder-row {
43114
display: flex;
44-
gap: 1.5rem;
45-
list-style: none;
115+
align-items: center;
116+
gap: 0.75rem;
46117
}
47118

48-
.footer-links a {
119+
.founder-name {
120+
font-family: 'IBM Plex Sans', sans-serif;
49121
font-size: 0.82rem;
122+
color: var(--text-muted);
123+
}
124+
125+
.founder-socials {
126+
display: flex;
127+
gap: 0.5rem;
128+
align-items: center;
129+
}
130+
131+
.founder-socials a {
50132
color: var(--text-dim);
51133
text-decoration: none;
134+
display: flex;
135+
align-items: center;
52136
transition: color 0.2s;
53-
font-family: 'IBM Plex Mono', monospace;
54137
}
55138

56-
.footer-links a:hover { color: var(--text-muted); }
139+
.founder-socials a:hover { color: var(--rust); }
140+
141+
.footer-right {
142+
display: flex;
143+
gap: 3rem;
144+
}
145+
146+
.footer-col {
147+
display: flex;
148+
flex-direction: column;
149+
gap: 0.6rem;
150+
}
57151

58-
.footer-copy {
59-
font-size: 0.78rem;
152+
.footer-col-title {
153+
font-family: 'IBM Plex Mono', monospace;
154+
font-size: 0.7rem;
155+
text-transform: uppercase;
156+
letter-spacing: 0.1em;
60157
color: var(--text-dim);
158+
margin-bottom: 0.25rem;
159+
}
160+
161+
.footer-col a {
162+
font-size: 0.83rem;
163+
color: var(--text-muted);
164+
text-decoration: none;
165+
transition: color 0.2s;
166+
font-family: 'IBM Plex Mono', monospace;
167+
}
168+
169+
.footer-col a:hover { color: var(--text); }
170+
171+
.footer-bottom {
172+
max-width: 900px;
173+
margin: 0 auto;
174+
padding-top: 1.5rem;
175+
border-top: 1px solid var(--border);
176+
display: flex;
177+
justify-content: space-between;
61178
font-family: 'IBM Plex Mono', monospace;
179+
font-size: 0.75rem;
180+
color: var(--text-dim);
62181
}
63182

183+
.footer-bottom a {
184+
color: var(--text-dim);
185+
text-decoration: none;
186+
transition: color 0.2s;
187+
}
188+
189+
.footer-bottom a:hover { color: var(--text-muted); }
190+
64191
@media (max-width: 640px) {
65-
footer { padding: 2rem 1.25rem; }
66-
.footer-inner { flex-direction: column; align-items: flex-start; }
192+
footer { padding: 2.5rem 1.25rem 1.5rem; }
193+
.footer-inner { flex-direction: column; gap: 2rem; }
194+
.footer-left { max-width: 100%; }
195+
.footer-right { gap: 2rem; }
67196
}
68197
</style>

0 commit comments

Comments
 (0)