Skip to content

Commit d18539f

Browse files
ajitpratap0Ajit Pratap Singhclaude
authored
design(website): typography, hero glow, feature icons, code highlighting (#372)
* design(website): upgrade typography to IBM Plex Mono + Instrument Sans Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> * design(website): add hero glow effects and gradient headline Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> * design(website): SVG feature icons with glow hover + syntax-highlighted code Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> --------- Co-authored-by: Ajit Pratap Singh <ajitpratapsingh@Ajits-Mac-mini-2655.local> Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
1 parent 174d150 commit d18539f

7 files changed

Lines changed: 86 additions & 49 deletions

File tree

‎website/src/components/CodeExamples.astro‎

Lines changed: 33 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -3,65 +3,65 @@ const examples = [
33
{
44
id: "parse",
55
label: "Parse",
6-
code: `package main
6+
code: `<span class="text-blue-400">package</span> main
77
8-
import "github.com/ajitpratap0/GoSQLX/pkg/gosqlx"
8+
<span class="text-blue-400">import</span> <span class="text-green-400">"github.com/ajitpratap0/GoSQLX/pkg/gosqlx"</span>
99
10-
func main() {
11-
ast, err := gosqlx.Parse("SELECT * FROM users WHERE active = true")
12-
if err != nil {
13-
log.Fatal(err)
10+
<span class="text-blue-400">func</span> <span class="text-yellow-300">main</span>() {
11+
ast, err := gosqlx.<span class="text-yellow-300">Parse</span>(<span class="text-green-400">"SELECT * FROM users WHERE active = true"</span>)
12+
<span class="text-blue-400">if</span> err != <span class="text-orange-400">nil</span> {
13+
log.<span class="text-yellow-300">Fatal</span>(err)
1414
}
15-
fmt.Printf("Statements: %d\\n", len(ast.Statements))
15+
fmt.<span class="text-yellow-300">Printf</span>(<span class="text-green-400">"Statements: %d\\n"</span>, <span class="text-yellow-300">len</span>(ast.Statements))
1616
}`,
1717
},
1818
{
1919
id: "format",
2020
label: "Format",
21-
code: `package main
21+
code: `<span class="text-blue-400">package</span> main
2222
23-
import "github.com/ajitpratap0/GoSQLX/pkg/gosqlx"
23+
<span class="text-blue-400">import</span> <span class="text-green-400">"github.com/ajitpratap0/GoSQLX/pkg/gosqlx"</span>
2424
25-
func main() {
26-
formatted, err := gosqlx.Format("select id,name from users where id=1")
27-
if err != nil {
28-
log.Fatal(err)
25+
<span class="text-blue-400">func</span> <span class="text-yellow-300">main</span>() {
26+
formatted, err := gosqlx.<span class="text-yellow-300">Format</span>(<span class="text-green-400">"select id,name from users where id=1"</span>)
27+
<span class="text-blue-400">if</span> err != <span class="text-orange-400">nil</span> {
28+
log.<span class="text-yellow-300">Fatal</span>(err)
2929
}
30-
fmt.Println(formatted)
31-
// SELECT id, name FROM users WHERE id = 1
30+
fmt.<span class="text-yellow-300">Println</span>(formatted)
31+
<span class="text-slate-500">// SELECT id, name FROM users WHERE id = 1</span>
3232
}`,
3333
},
3434
{
3535
id: "validate",
3636
label: "Validate",
37-
code: `package main
37+
code: `<span class="text-blue-400">package</span> main
3838
39-
import "github.com/ajitpratap0/GoSQLX/pkg/gosqlx"
39+
<span class="text-blue-400">import</span> <span class="text-green-400">"github.com/ajitpratap0/GoSQLX/pkg/gosqlx"</span>
4040
41-
func main() {
42-
err := gosqlx.Validate("SELECT * FROM users")
43-
if err != nil {
44-
fmt.Println("Invalid SQL:", err)
45-
} else {
46-
fmt.Println("Valid SQL!")
41+
<span class="text-blue-400">func</span> <span class="text-yellow-300">main</span>() {
42+
err := gosqlx.<span class="text-yellow-300">Validate</span>(<span class="text-green-400">"SELECT * FROM users"</span>)
43+
<span class="text-blue-400">if</span> err != <span class="text-orange-400">nil</span> {
44+
fmt.<span class="text-yellow-300">Println</span>(<span class="text-green-400">"Invalid SQL:"</span>, err)
45+
} <span class="text-blue-400">else</span> {
46+
fmt.<span class="text-yellow-300">Println</span>(<span class="text-green-400">"Valid SQL!"</span>)
4747
}
4848
}`,
4949
},
5050
{
5151
id: "lint",
5252
label: "Lint",
53-
code: `package main
53+
code: `<span class="text-blue-400">package</span> main
5454
55-
import "github.com/ajitpratap0/GoSQLX/pkg/linter"
55+
<span class="text-blue-400">import</span> <span class="text-green-400">"github.com/ajitpratap0/GoSQLX/pkg/linter"</span>
5656
57-
func main() {
58-
l := linter.New()
59-
results, err := l.Lint("SELECT * FROM users")
60-
if err != nil {
61-
log.Fatal(err)
57+
<span class="text-blue-400">func</span> <span class="text-yellow-300">main</span>() {
58+
l := linter.<span class="text-yellow-300">New</span>()
59+
results, err := l.<span class="text-yellow-300">Lint</span>(<span class="text-green-400">"SELECT * FROM users"</span>)
60+
<span class="text-blue-400">if</span> err != <span class="text-orange-400">nil</span> {
61+
log.<span class="text-yellow-300">Fatal</span>(err)
6262
}
63-
for _, r := range results {
64-
fmt.Printf("[%s] %s\\n", r.Rule, r.Message)
63+
<span class="text-blue-400">for</span> _, r := <span class="text-blue-400">range</span> results {
64+
fmt.<span class="text-yellow-300">Printf</span>(<span class="text-green-400">"[%s] %s\\n"</span>, r.Rule, r.Message)
6565
}
6666
}`,
6767
},
@@ -95,7 +95,7 @@ func main() {
9595
class={`code-panel ${i === 0 ? "" : "hidden"}`}
9696
data-panel={ex.id}
9797
>
98-
<pre class="bg-[#0d1117] rounded-b-xl p-5 overflow-x-auto border border-t-0 border-slate-700"><code class="text-sm font-mono text-slate-300 leading-relaxed" set:text={ex.code} /></pre>
98+
<pre class="bg-[#0d1117] rounded-b-xl p-5 overflow-x-auto border border-t-0 border-slate-700"><code class="text-sm font-mono text-slate-300 leading-relaxed" set:html={ex.code} /></pre>
9999
</div>
100100
))}
101101
</div>

‎website/src/components/FeatureCards.astro‎

Lines changed: 22 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,46 @@
11
---
22
const features = [
33
{
4-
icon: "🌐",
54
title: "Multi-Dialect",
65
description: "PostgreSQL, MySQL, SQLite, SQL Server, Oracle — one parser, all dialects.",
6+
color: "purple",
7+
icon: `<svg class="w-5 h-5 text-purple-400" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M12 21a9.004 9.004 0 0 0 8.716-6.747M12 21a9.004 9.004 0 0 1-8.716-6.747M12 21c2.485 0 4.5-4.03 4.5-9S14.485 3 12 3m0 18c-2.485 0-4.5-4.03-4.5-9S9.515 3 12 3m0 0a8.997 8.997 0 0 1 7.843 4.582M12 3a8.997 8.997 0 0 0-7.843 4.582m15.686 0A11.953 11.953 0 0 1 12 10.5c-2.998 0-5.74-1.1-7.843-2.918m15.686 0A8.959 8.959 0 0 1 21 12c0 .778-.099 1.533-.284 2.253m0 0A17.919 17.919 0 0 1 12 16.5c-3.162 0-6.133-.815-8.716-2.247m0 0A9.015 9.015 0 0 1 3 12c0-1.605.42-3.113 1.157-4.418" /></svg>`,
8+
bgClass: "bg-purple-500/10",
79
},
810
{
9-
icon: "🔒",
1011
title: "Thread-Safe",
1112
description: "Zero race conditions validated with 20,000+ concurrent operations.",
13+
color: "green",
14+
icon: `<svg class="w-5 h-5 text-green-400" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M16.5 10.5V6.75a4.5 4.5 0 1 0-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 0 0 2.25-2.25v-6.75a2.25 2.25 0 0 0-2.25-2.25H6.75a2.25 2.25 0 0 0-2.25 2.25v6.75a2.25 2.25 0 0 0 2.25 2.25Z" /></svg>`,
15+
bgClass: "bg-green-500/10",
1216
},
1317
{
14-
icon: "⚡",
1518
title: "Zero-Copy",
1619
description: "Optimized tokenizer processes SQL bytes without unnecessary allocations.",
20+
color: "orange",
21+
icon: `<svg class="w-5 h-5 text-orange-400" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="m3.75 13.5 10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75Z" /></svg>`,
22+
bgClass: "bg-orange-500/10",
1723
},
1824
{
19-
icon: "♻️",
2025
title: "Object Pooling",
2126
description: "sync.Pool-based recycling for ASTs, tokenizers, and expressions.",
27+
color: "blue",
28+
icon: `<svg class="w-5 h-5 text-blue-400" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 12c0-1.232-.046-2.453-.138-3.662a4.006 4.006 0 0 0-3.7-3.7 48.678 48.678 0 0 0-7.324 0 4.006 4.006 0 0 0-3.7 3.7c-.017.22-.032.441-.046.662M19.5 12l3-3m-3 3-3-3m-12 3c0 1.232.046 2.453.138 3.662a4.006 4.006 0 0 0 3.7 3.7 48.656 48.656 0 0 0 7.324 0 4.006 4.006 0 0 0 3.7-3.7c.017-.22.032-.441.046-.662M4.5 12l3 3m-3-3-3 3" /></svg>`,
29+
bgClass: "bg-blue-500/10",
2230
},
2331
{
24-
icon: "🛡️",
2532
title: "Security Scanner",
2633
description: "Built-in SQL injection detection with severity classification.",
34+
color: "red",
35+
icon: `<svg class="w-5 h-5 text-red-400" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75 11.25 15 15 9.75m-3-7.036A11.959 11.959 0 0 1 3.598 6 11.99 11.99 0 0 0 3 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285Z" /></svg>`,
36+
bgClass: "bg-red-500/10",
2737
},
2838
{
29-
icon: "🤖",
3039
title: "MCP Server",
3140
description: "Model Context Protocol server for AI-powered SQL tooling.",
41+
color: "cyan",
42+
icon: `<svg class="w-5 h-5 text-cyan-400" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M8.25 3v1.5M4.5 8.25H3m18 0h-1.5M4.5 12H3m18 0h-1.5m-15 3.75H3m18 0h-1.5M8.25 19.5V21M12 3v1.5m0 15V21m3.75-18v1.5m0 15V21m-9-1.5h10.5a2.25 2.25 0 0 0 2.25-2.25V6.75a2.25 2.25 0 0 0-2.25-2.25H6.75A2.25 2.25 0 0 0 4.5 6.75v10.5a2.25 2.25 0 0 0 2.25 2.25Zm.75-12h9v9h-9v-9Z" /></svg>`,
43+
bgClass: "bg-cyan-500/10",
3244
},
3345
];
3446
---
@@ -40,8 +52,10 @@ const features = [
4052
</h2>
4153
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 max-w-5xl mx-auto">
4254
{features.map((feature) => (
43-
<div class="bg-[#1e293b] rounded-xl p-6 border border-slate-700 hover:border-blue-500/50 transition-colors duration-200">
44-
<div class="text-2xl mb-3">{feature.icon}</div>
55+
<div class="group bg-[#1e293b] rounded-xl p-6 border border-slate-700 hover:border-blue-500/50 transition-all duration-300 hover:shadow-lg hover:shadow-blue-500/5">
56+
<div class={`w-10 h-10 rounded-lg ${feature.bgClass} flex items-center justify-center mb-4`}>
57+
<Fragment set:html={feature.icon} />
58+
</div>
4559
<h3 class="text-lg font-semibold text-white mb-1">{feature.title}</h3>
4660
<p class="text-slate-400 text-sm">{feature.description}</p>
4761
</div>

‎website/src/components/Footer.astro‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,8 +27,13 @@ const columns = [
2727
];
2828
---
2929

30-
<footer class="bg-surface border-t border-elevated">
30+
<footer class="bg-surface border-t border-elevated relative">
31+
<!-- Gradient accent line -->
32+
<div class="absolute top-0 left-0 right-0 h-px bg-gradient-to-r from-orange-500 via-blue-500 to-green-500"></div>
3133
<div class="container mx-auto px-4 py-12">
34+
<a href="/GoSQLX/" class="block mb-8">
35+
<img src="/GoSQLX/images/logo.png" alt="GoSQLX" class="h-8" />
36+
</a>
3237
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
3338
{columns.map((col) => (
3439
<div>

‎website/src/components/HeroPlayground.tsx‎

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -96,15 +96,22 @@ export default function HeroPlayground() {
9696
className="absolute inset-0 pointer-events-none"
9797
style={{
9898
backgroundImage:
99-
"linear-gradient(rgba(148,163,184,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(148,163,184,0.05) 1px, transparent 1px)",
99+
"linear-gradient(rgba(148,163,184,0.08) 1px, transparent 1px), linear-gradient(90deg, rgba(148,163,184,0.08) 1px, transparent 1px)",
100100
backgroundSize: "40px 40px",
101101
}}
102102
/>
103103

104+
{/* Radial glow effects */}
105+
<div className="absolute top-1/3 left-1/2 -translate-x-1/2 w-[800px] h-[600px] pointer-events-none"
106+
style={{
107+
background: 'radial-gradient(ellipse at center, rgba(59,130,246,0.08) 0%, rgba(249,115,22,0.04) 40%, transparent 70%)',
108+
}}
109+
/>
110+
104111
<div className="relative container mx-auto px-4 pt-20 pb-16">
105112
{/* Headlines */}
106113
<div className="text-center mb-10">
107-
<h1 className="text-5xl font-extrabold text-white mb-4">
114+
<h1 className="text-5xl md:text-6xl font-extrabold mb-4 bg-gradient-to-r from-white via-slate-200 to-slate-400 bg-clip-text text-transparent">
108115
Parse SQL at the speed of Go
109116
</h1>
110117
<p className="text-lg text-slate-400">
@@ -113,7 +120,7 @@ export default function HeroPlayground() {
113120
</div>
114121

115122
{/* Compact playground */}
116-
<div className="max-w-5xl mx-auto rounded-xl border border-slate-700 overflow-hidden bg-slate-900 shadow-2xl shadow-blue-500/5">
123+
<div className="max-w-5xl mx-auto rounded-xl border border-slate-700 overflow-hidden bg-slate-900 shadow-2xl shadow-blue-500/10">
117124
{loading && (
118125
<div className="flex items-center justify-center h-64">
119126
<div className="text-center space-y-3">

‎website/src/pages/index.astro‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,12 @@ import SocialProof from '../components/SocialProof.astro';
99
---
1010
<BaseLayout title="GoSQLX - High-Performance SQL Parser for Go" description="Production-ready, zero-copy SQL parsing SDK for Go with multi-dialect support">
1111
<HeroPlayground client:only="react" />
12+
<!-- Angled divider -->
13+
<div class="relative h-16 -mt-1">
14+
<svg class="absolute bottom-0 w-full h-16" viewBox="0 0 1440 64" preserveAspectRatio="none">
15+
<path d="M0,0 L1440,40 L1440,64 L0,64 Z" fill="#0f172a" opacity="0.5"/>
16+
</svg>
17+
</div>
1218
<StatsBar />
1319
<FeatureCards />
1420
<CodeExamples />

‎website/src/styles/global.css‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,14 @@
1-
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;700&display=swap');
1+
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600;700&family=Instrument+Sans:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;700&display=swap');
22

33
@tailwind base;
44
@tailwind components;
55
@tailwind utilities;
66

77
body {
88
@apply bg-slate-900 text-slate-50;
9-
font-family: 'Inter', system-ui, sans-serif;
9+
font-family: 'Instrument Sans', system-ui, sans-serif;
10+
}
11+
12+
h1, h2, h3, h4, h5, h6 {
13+
font-family: 'IBM Plex Mono', monospace;
1014
}

‎website/tailwind.config.mjs‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,8 +13,9 @@ export default {
1313
'accent-purple': '#a78bfa',
1414
},
1515
fontFamily: {
16-
code: ['"JetBrains Mono"', '"Fira Code"', 'monospace'],
17-
body: ['Inter', 'system-ui', 'sans-serif'],
16+
code: ['"JetBrains Mono"', 'monospace'],
17+
body: ['"Instrument Sans"', 'system-ui', 'sans-serif'],
18+
heading: ['"IBM Plex Mono"', 'monospace'],
1819
},
1920
},
2021
},

0 commit comments

Comments
 (0)