Skip to content

Commit 47db8a2

Browse files
peaktwilightpeaktwilight
committed
Redesign hero: languages card, cleaner copy, multi-lang terminal
Replace floating language pills with a structured languages card showing colored dots, names, and per-language rule counts in a grid. Simplify the description to one clear sentence instead of a feature list. Terminal demo now shows findings across 5 languages (JS, Python, Ruby, Java, Go) with file paths colored by language. none
1 parent 182f1e0 commit 47db8a2

2 files changed

Lines changed: 52 additions & 54 deletions

File tree

‎www/src/components/sections/Hero.astro‎

Lines changed: 26 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -5,14 +5,13 @@ import { totalRules, ruleGroups } from '../../data/rules';
55
const langCount = ruleGroups.length;
66
77
const languages = [
8-
{ name: 'JavaScript', short: 'JS', color: '#F7DF1E' },
9-
{ name: 'TypeScript', short: 'TS', color: '#3178C6' },
10-
{ name: 'Python', short: 'PY', color: '#3776AB' },
11-
{ name: 'Go', short: 'GO', color: '#00ADD8' },
12-
{ name: 'Ruby', short: 'RB', color: '#CC342D' },
13-
{ name: 'Java', short: 'JA', color: '#ED8B00' },
14-
{ name: 'PHP', short: 'PHP', color: '#777BB4' },
15-
{ name: 'Rust', short: 'RS', color: '#DEA584' },
8+
{ name: 'JavaScript', color: '#F7DF1E', rules: 24 },
9+
{ name: 'Python', color: '#3776AB', rules: 26 },
10+
{ name: 'Go', color: '#00ADD8', rules: 8 },
11+
{ name: 'Ruby', color: '#CC342D', rules: 10 },
12+
{ name: 'Java', color: '#ED8B00', rules: 10 },
13+
{ name: 'PHP', color: '#777BB4', rules: 10 },
14+
{ name: 'Rust', color: '#DEA584', rules: 10 },
1615
];
1716
---
1817

@@ -40,38 +39,25 @@ const languages = [
4039
<!-- Main hero grid -->
4140
<div class="grid gap-10 lg:grid-cols-[1fr_1fr] lg:items-start">
4241

43-
<!-- Left: copy -->
42+
<!-- Left -->
4443
<div class="fade-up fade-up-delay-1">
4544
<div class="flex items-center gap-4 mb-6">
46-
<svg class="w-12 h-12 sm:w-16 sm:h-16 shrink-0" viewBox="0 0 64 64" fill="none">
45+
<svg class="w-12 h-12 sm:w-14 sm:h-14 shrink-0" viewBox="0 0 64 64" fill="none">
4746
<path d="M8 8L20 28L32 20L44 28L56 8L52 32L44 44L36 52H28L20 44L12 32L8 8Z" fill="#F59E0B" fill-opacity="0.15" stroke="#F59E0B" stroke-width="2" stroke-linejoin="round"/>
4847
<circle cx="24" cy="32" r="2.5" fill="#F59E0B"/>
4948
<circle cx="40" cy="32" r="2.5" fill="#F59E0B"/>
5049
</svg>
51-
<h1 class="font-heading text-noir-50 leading-[0.92] tracking-[-0.03em]" style="font-size: clamp(3.2rem, 7.5vw, 6rem);">
50+
<h1 class="font-heading text-noir-50 leading-[0.92] tracking-[-0.03em]" style="font-size: clamp(3.2rem, 7.5vw, 5.5rem);">
5251
fox<span class="text-fox-light">guard</span>
5352
</h1>
5453
</div>
5554

56-
<p class="max-w-lg text-lg text-noir-300 mb-3">
57-
Fast local security scanner written in Rust.
55+
<p class="max-w-md text-lg text-noir-300 mb-8">
56+
Security scanner that runs before you commit. {totalRules} built-in rules, single Rust binary, no network calls.
5857
</p>
59-
<p class="max-w-lg text-base text-noir-500 leading-relaxed mb-6">
60-
{totalRules} built-in rules across {langCount} languages. Secrets scanning. Baselines. Semgrep-compatible YAML. Single binary.
61-
</p>
62-
63-
<!-- Language badges -->
64-
<div class="flex flex-wrap gap-2 mb-8">
65-
{languages.map((lang) => (
66-
<div class="flex items-center gap-1.5 rounded-md bg-noir-900 border border-noir-800 px-2.5 py-1.5 transition-colors hover:border-noir-700">
67-
<span class="w-2 h-2 rounded-full shrink-0" style={`background: ${lang.color}`}></span>
68-
<span class="font-mono text-[10px] text-noir-400 tracking-wide">{lang.name}</span>
69-
</div>
70-
))}
71-
</div>
7258

7359
<!-- CTA -->
74-
<div class="flex flex-col sm:flex-row items-start sm:items-center gap-3 mb-10">
60+
<div class="flex flex-col sm:flex-row items-start sm:items-center gap-3 mb-8">
7561
<button
7662
id="npx-btn"
7763
class="group flex items-center gap-3 rounded-md border border-noir-800 bg-noir-950 px-5 py-3 font-mono text-sm text-fox-light transition-all duration-200 hover:border-noir-700 cursor-pointer"
@@ -92,21 +78,20 @@ const languages = [
9278
</a>
9379
</div>
9480

95-
<!-- Stats row -->
96-
<div class="flex flex-wrap items-center gap-6 font-mono text-xs">
97-
<div>
98-
<span class="text-noir-100 text-lg font-heading">{totalRules}</span>
99-
<span class="text-noir-600 ml-1.5">rules</span>
100-
</div>
101-
<div class="w-px h-4 bg-noir-800"></div>
102-
<div>
103-
<span class="text-noir-100 text-lg font-heading">{langCount}</span>
104-
<span class="text-noir-600 ml-1.5">languages</span>
81+
<!-- Languages strip -->
82+
<div class="bg-noir-900 border border-noir-800 rounded-xl p-4">
83+
<div class="flex items-center justify-between mb-3">
84+
<span class="font-mono text-[10px] uppercase tracking-wider text-noir-600">{langCount} languages</span>
85+
<span class="font-mono text-[10px] text-fox">{totalRules} rules</span>
10586
</div>
106-
<div class="w-px h-4 bg-noir-800"></div>
107-
<div>
108-
<span class="text-noir-100 text-lg font-heading">&lt;1s</span>
109-
<span class="text-noir-600 ml-1.5">typical scan</span>
87+
<div class="grid grid-cols-4 sm:grid-cols-7 gap-2">
88+
{languages.map((lang) => (
89+
<div class="flex flex-col items-center gap-1.5 py-1.5">
90+
<span class="w-3 h-3 rounded-full" style={`background: ${lang.color}; box-shadow: 0 0 8px ${lang.color}33`}></span>
91+
<span class="font-mono text-[9px] text-noir-400">{lang.name}</span>
92+
<span class="font-mono text-[9px] text-noir-600">{lang.rules}</span>
93+
</div>
94+
))}
11095
</div>
11196
</div>
11297
</div>

‎www/src/components/ui/TerminalDemo.astro‎

Lines changed: 26 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
---
22
/**
33
* Fake terminal output showing foxguard in action.
4-
* This is the hero visual — it sells the tool.
4+
* Shows findings across multiple languages.
55
*/
66
---
77

@@ -14,38 +14,51 @@
1414
</div>
1515
<div class="p-4 sm:p-5 font-mono text-[11px] sm:text-[12px] leading-[1.9] text-left">
1616
<div><span class="text-fox-light">$</span> <span class="text-noir-100">foxguard .</span></div>
17-
<div class="text-noir-600">Scanning 1,247 files...</div>
18-
<div class="h-3"></div>
17+
<div class="text-noir-600">Scanning 2,814 files...</div>
18+
<div class="h-2.5"></div>
1919

20-
<div><span class="text-blue-400/90">src/auth/login.js</span><span class="text-noir-600">:14:5</span></div>
20+
<div><span class="text-[#F7DF1E]/70">src/auth/login.js</span><span class="text-noir-600">:14:5</span></div>
2121
<div class="pl-4">
2222
<span class="text-[#ef4444] font-semibold text-[10px] uppercase tracking-wide">critical</span>
2323
<span class="text-noir-300 ml-1.5">js/no-sql-injection</span>
2424
<span class="text-noir-600 ml-1.5">CWE-89</span>
2525
</div>
26-
<div class="pl-4 text-noir-600">SQL query built with template literal interpolation</div>
27-
<div class="h-3"></div>
26+
<div class="h-2.5"></div>
2827

29-
<div><span class="text-blue-400/90">src/utils/config.py</span><span class="text-noir-600">:7:1</span></div>
28+
<div><span class="text-[#3776AB]/70">app/views.py</span><span class="text-noir-600">:42:1</span></div>
3029
<div class="pl-4">
3130
<span class="text-[#f97316] font-semibold text-[10px] uppercase tracking-wide">high</span>
3231
<span class="text-noir-300 ml-1.5">py/no-hardcoded-secret</span>
3332
<span class="text-noir-600 ml-1.5">CWE-798</span>
3433
</div>
35-
<div class="pl-4 text-noir-600">Hardcoded secret in 'api_key'</div>
36-
<div class="h-3"></div>
34+
<div class="h-2.5"></div>
3735

38-
<div><span class="text-blue-400/90">cmd/server.go</span><span class="text-noir-600">:42:3</span></div>
36+
<div><span class="text-[#CC342D]/70">app/controllers/users.rb</span><span class="text-noir-600">:23:5</span></div>
37+
<div class="pl-4">
38+
<span class="text-[#ef4444] font-semibold text-[10px] uppercase tracking-wide">critical</span>
39+
<span class="text-noir-300 ml-1.5">rb/no-sql-injection</span>
40+
<span class="text-noir-600 ml-1.5">CWE-89</span>
41+
</div>
42+
<div class="h-2.5"></div>
43+
44+
<div><span class="text-[#ED8B00]/70">UserService.java</span><span class="text-noir-600">:67:12</span></div>
45+
<div class="pl-4">
46+
<span class="text-[#f97316] font-semibold text-[10px] uppercase tracking-wide">high</span>
47+
<span class="text-noir-300 ml-1.5">java/no-xxe</span>
48+
<span class="text-noir-600 ml-1.5">CWE-611</span>
49+
</div>
50+
<div class="h-2.5"></div>
51+
52+
<div><span class="text-[#00ADD8]/70">cmd/server.go</span><span class="text-noir-600">:31:3</span></div>
3953
<div class="pl-4">
4054
<span class="text-[#f97316] font-semibold text-[10px] uppercase tracking-wide">high</span>
4155
<span class="text-noir-300 ml-1.5">go/no-ssrf</span>
4256
<span class="text-noir-600 ml-1.5">CWE-918</span>
4357
</div>
44-
<div class="pl-4 text-noir-600">Potential SSRF via http.Get with variable URL</div>
45-
<div class="h-3"></div>
58+
<div class="h-2.5"></div>
4659

4760
<div class="border-t border-noir-800 pt-3">
48-
Found <span class="text-fox-light font-semibold">3 issues</span> in <span class="text-fox-light font-semibold">1,247 files</span> <span class="text-noir-600">(0.84s)</span>
61+
Found <span class="text-fox-light font-semibold">5 issues</span> in <span class="text-fox-light font-semibold">2,814 files</span> <span class="text-noir-600">(0.92s)</span>
4962
</div>
5063
</div>
5164
</div>

0 commit comments

Comments
 (0)