Skip to content

Commit 2d358f9

Browse files
swernerxswernerx
committed
style: add colorful gradients and visual polish
1 parent db88b96 commit 2d358f9

File tree

1 file changed

+98
-24
lines changed

1 file changed

+98
-24
lines changed

‎website/index.html‎

Lines changed: 98 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -58,35 +58,109 @@
5858
background-clip: text;
5959
}
6060
.code-block {
61-
background: #f8fafc;
61+
background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
6262
border: 1px solid #e2e8f0;
6363
}
6464
.feature-card {
6565
background: white;
6666
box-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 4px 12px rgba(0,0,0,0.04);
67+
position: relative;
68+
overflow: hidden;
6769
}
70+
.feature-card::before {
71+
content: '';
72+
position: absolute;
73+
top: 0;
74+
left: 0;
75+
right: 0;
76+
height: 3px;
77+
background: linear-gradient(90deg, var(--card-color, #3178C6), var(--card-color-end, #4B32C3));
78+
opacity: 0;
79+
transition: opacity 0.3s ease;
80+
}
81+
.feature-card:hover::before { opacity: 1; }
6882
.feature-card:hover {
6983
box-shadow: 0 4px 12px rgba(0,0,0,0.1), 0 8px 24px rgba(0,0,0,0.06);
84+
transform: translateY(-2px);
7085
}
86+
.feature-card { transition: all 0.3s ease; }
7187
pre code .comment { color: #64748b; }
7288
pre code .keyword { color: #7c3aed; }
7389
pre code .string { color: #059669; }
7490
pre code .function { color: #2563eb; }
7591
pre code .type { color: #d97706; }
7692
pre code .check { color: #16a34a; }
7793
pre code .error { color: #dc2626; }
78-
.hero-pattern {
79-
background-color: #f8fafc;
80-
background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%2394a3b8' fill-opacity='0.08'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
94+
.hero-section {
95+
background: linear-gradient(135deg, #f0fdf4 0%, #ecfeff 25%, #f5f3ff 50%, #fef3c7 75%, #fdf2f8 100%);
96+
position: relative;
97+
overflow: hidden;
98+
}
99+
.hero-section::before {
100+
content: '';
101+
position: absolute;
102+
top: -50%;
103+
right: -20%;
104+
width: 600px;
105+
height: 600px;
106+
background: radial-gradient(circle, rgba(34, 197, 94, 0.15) 0%, transparent 70%);
107+
pointer-events: none;
108+
}
109+
.hero-section::after {
110+
content: '';
111+
position: absolute;
112+
bottom: -30%;
113+
left: -10%;
114+
width: 500px;
115+
height: 500px;
116+
background: radial-gradient(circle, rgba(79, 70, 229, 0.12) 0%, transparent 70%);
117+
pointer-events: none;
118+
}
119+
.section-gradient-1 {
120+
background: linear-gradient(180deg, #ffffff 0%, #f8fafc 50%, #f1f5f9 100%);
121+
}
122+
.section-gradient-2 {
123+
background: linear-gradient(135deg, #f0fdf4 0%, #ecfeff 50%, #f5f3ff 100%);
124+
}
125+
.section-gradient-3 {
126+
background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
127+
}
128+
.btn-gradient {
129+
background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
130+
box-shadow: 0 4px 14px rgba(22, 163, 74, 0.35);
131+
transition: all 0.3s ease;
132+
}
133+
.btn-gradient:hover {
134+
box-shadow: 0 6px 20px rgba(22, 163, 74, 0.45);
135+
transform: translateY(-1px);
81136
}
82137
.logo-strip {
83138
filter: grayscale(100%);
84139
opacity: 0.6;
85-
transition: all 0.2s ease;
140+
transition: all 0.3s ease;
86141
}
87142
.logo-strip:hover {
88143
filter: grayscale(0%);
89144
opacity: 1;
145+
transform: scale(1.1);
146+
}
147+
.glow-card {
148+
position: relative;
149+
}
150+
.glow-card::after {
151+
content: '';
152+
position: absolute;
153+
inset: -1px;
154+
background: linear-gradient(135deg, #22c55e, #3178C6, #4B32C3);
155+
border-radius: inherit;
156+
z-index: -1;
157+
opacity: 0;
158+
transition: opacity 0.3s ease;
159+
}
160+
.glow-card:hover::after { opacity: 0.5; filter: blur(8px); }
161+
.decorative-dots {
162+
background-image: radial-gradient(circle, #cbd5e1 1px, transparent 1px);
163+
background-size: 24px 24px;
90164
}
91165
</style>
92166
</head>
@@ -113,7 +187,7 @@
113187
</nav>
114188

115189
<!-- Hero Section -->
116-
<section class="min-h-screen flex items-center pt-20 hero-pattern">
190+
<section class="min-h-screen flex items-center pt-20 hero-section">
117191
<div class="max-w-6xl mx-auto px-6 py-20">
118192
<!-- Logo Strip -->
119193
<div class="flex items-center justify-center gap-8 mb-12">
@@ -145,7 +219,7 @@ <h1 class="text-4xl sm:text-5xl lg:text-6xl font-bold leading-tight mb-6 text-sl
145219
TypeScript's type system eliminates false positives, no endless whitelists needed.
146220
</p>
147221
<div class="flex flex-wrap gap-4 justify-center lg:justify-start">
148-
<a href="#quickstart" class="px-6 py-3 bg-slate-900 hover:bg-slate-800 text-white font-semibold rounded-lg transition-colors shadow-lg">
222+
<a href="#quickstart" class="px-6 py-3 btn-gradient text-white font-semibold rounded-lg">
149223
Get Started
150224
</a>
151225
<a href="https://github.com/sebastian-software/eslint-plugin-lingui-typescript" target="_blank" class="px-6 py-3 bg-white hover:bg-slate-50 text-slate-800 font-medium rounded-lg transition-colors border border-slate-200 shadow-sm">
@@ -195,7 +269,7 @@ <h1 class="text-4xl sm:text-5xl lg:text-6xl font-bold leading-tight mb-6 text-sl
195269
</section>
196270

197271
<!-- Features Section -->
198-
<section id="features" class="py-20 bg-white">
272+
<section id="features" class="py-20 section-gradient-1">
199273
<div class="max-w-6xl mx-auto px-6">
200274
<div class="text-center mb-16">
201275
<h2 class="text-3xl sm:text-4xl font-bold mb-4 text-slate-900">Smart Detection, Zero Config</h2>
@@ -206,8 +280,8 @@ <h2 class="text-3xl sm:text-4xl font-bold mb-4 text-slate-900">Smart Detection,
206280
</div>
207281
<div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-6">
208282
<!-- Feature 1 -->
209-
<div class="feature-card rounded-2xl p-6 border border-slate-100 transition-shadow">
210-
<div class="w-12 h-12 bg-blue-100 rounded-xl flex items-center justify-center mb-4">
283+
<div class="feature-card rounded-2xl p-6 border border-slate-100" style="--card-color: #3b82f6; --card-color-end: #6366f1;">
284+
<div class="w-12 h-12 bg-gradient-to-br from-blue-100 to-indigo-100 rounded-xl flex items-center justify-center mb-4">
211285
<svg class="w-6 h-6 text-blue-600" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><circle cx="12" cy="12" r="6"/><circle cx="12" cy="12" r="2"/></svg>
212286
</div>
213287
<h3 class="text-lg font-semibold mb-2 text-slate-900">String Literal Unions</h3>
@@ -216,8 +290,8 @@ <h3 class="text-lg font-semibold mb-2 text-slate-900">String Literal Unions</h3>
216290
</p>
217291
</div>
218292
<!-- Feature 2 -->
219-
<div class="feature-card rounded-2xl p-6 border border-slate-100 transition-shadow">
220-
<div class="w-12 h-12 bg-purple-100 rounded-xl flex items-center justify-center mb-4">
293+
<div class="feature-card rounded-2xl p-6 border border-slate-100" style="--card-color: #8b5cf6; --card-color-end: #a855f7;">
294+
<div class="w-12 h-12 bg-gradient-to-br from-purple-100 to-fuchsia-100 rounded-xl flex items-center justify-center mb-4">
221295
<svg class="w-6 h-6 text-purple-600" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20M2 12h20"/></svg>
222296
</div>
223297
<h3 class="text-lg font-semibold mb-2 text-slate-900">DOM & Intl APIs</h3>
@@ -226,8 +300,8 @@ <h3 class="text-lg font-semibold mb-2 text-slate-900">DOM & Intl APIs</h3>
226300
</p>
227301
</div>
228302
<!-- Feature 3 -->
229-
<div class="feature-card rounded-2xl p-6 border border-slate-100 transition-shadow">
230-
<div class="w-12 h-12 bg-pink-100 rounded-xl flex items-center justify-center mb-4">
303+
<div class="feature-card rounded-2xl p-6 border border-slate-100" style="--card-color: #ec4899; --card-color-end: #f43f5e;">
304+
<div class="w-12 h-12 bg-gradient-to-br from-pink-100 to-rose-100 rounded-xl flex items-center justify-center mb-4">
231305
<svg class="w-6 h-6 text-pink-600" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><circle cx="13.5" cy="6.5" r="2.5"/><circle cx="19" cy="11.5" r="2.5"/><circle cx="17" cy="18.5" r="2.5"/><circle cx="8.5" cy="13.5" r="2.5"/><path d="M21 12a9 9 0 1 1-9-9c0 4 2 6 4 8s4 5 5 5 0-4 0-4z"/></svg>
232306
</div>
233307
<h3 class="text-lg font-semibold mb-2 text-slate-900">Styling Props</h3>
@@ -236,8 +310,8 @@ <h3 class="text-lg font-semibold mb-2 text-slate-900">Styling Props</h3>
236310
</p>
237311
</div>
238312
<!-- Feature 4 -->
239-
<div class="feature-card rounded-2xl p-6 border border-slate-100 transition-shadow">
240-
<div class="w-12 h-12 bg-amber-100 rounded-xl flex items-center justify-center mb-4">
313+
<div class="feature-card rounded-2xl p-6 border border-slate-100" style="--card-color: #f59e0b; --card-color-end: #f97316;">
314+
<div class="w-12 h-12 bg-gradient-to-br from-amber-100 to-orange-100 rounded-xl flex items-center justify-center mb-4">
241315
<svg class="w-6 h-6 text-amber-600" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M4 9h16M4 15h16M10 3 8 21M16 3l-2 18"/></svg>
242316
</div>
243317
<h3 class="text-lg font-semibold mb-2 text-slate-900">Numeric Strings</h3>
@@ -246,8 +320,8 @@ <h3 class="text-lg font-semibold mb-2 text-slate-900">Numeric Strings</h3>
246320
</p>
247321
</div>
248322
<!-- Feature 5 -->
249-
<div class="feature-card rounded-2xl p-6 border border-slate-100 transition-shadow">
250-
<div class="w-12 h-12 bg-green-100 rounded-xl flex items-center justify-center mb-4">
323+
<div class="feature-card rounded-2xl p-6 border border-slate-100" style="--card-color: #22c55e; --card-color-end: #10b981;">
324+
<div class="w-12 h-12 bg-gradient-to-br from-green-100 to-emerald-100 rounded-xl flex items-center justify-center mb-4">
251325
<svg class="w-6 h-6 text-green-600" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M12 2H2v10l9.29 9.29a1 1 0 0 0 1.42 0l8.58-8.58a1 1 0 0 0 0-1.42L12 2Z"/><circle cx="7.5" cy="7.5" r="1.5" fill="currentColor"/></svg>
252326
</div>
253327
<h3 class="text-lg font-semibold mb-2 text-slate-900">Branded Types</h3>
@@ -256,8 +330,8 @@ <h3 class="text-lg font-semibold mb-2 text-slate-900">Branded Types</h3>
256330
</p>
257331
</div>
258332
<!-- Feature 6 -->
259-
<div class="feature-card rounded-2xl p-6 border border-slate-100 transition-shadow">
260-
<div class="w-12 h-12 bg-cyan-100 rounded-xl flex items-center justify-center mb-4">
333+
<div class="feature-card rounded-2xl p-6 border border-slate-100" style="--card-color: #06b6d4; --card-color-end: #0ea5e9;">
334+
<div class="w-12 h-12 bg-gradient-to-br from-cyan-100 to-sky-100 rounded-xl flex items-center justify-center mb-4">
261335
<svg class="w-6 h-6 text-cyan-600" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/><path d="m9 12 2 2 4-4"/></svg>
262336
</div>
263337
<h3 class="text-lg font-semibold mb-2 text-slate-900">Package Verification</h3>
@@ -270,7 +344,7 @@ <h3 class="text-lg font-semibold mb-2 text-slate-900">Package Verification</h3>
270344
</section>
271345

272346
<!-- Branded Types Section -->
273-
<section class="py-20 bg-slate-50">
347+
<section class="py-20 section-gradient-2">
274348
<div class="max-w-6xl mx-auto px-6">
275349
<div class="grid lg:grid-cols-2 gap-12 items-center">
276350
<div>
@@ -319,7 +393,7 @@ <h2 class="text-3xl sm:text-4xl font-bold mb-4 text-slate-900">Custom Ignore Pat
319393
</section>
320394

321395
<!-- Comparison Section -->
322-
<section id="comparison" class="py-20 bg-white">
396+
<section id="comparison" class="py-20 section-gradient-3">
323397
<div class="max-w-6xl mx-auto px-6">
324398
<div class="text-center mb-16">
325399
<h2 class="text-3xl sm:text-4xl font-bold mb-4 text-slate-900">Why TypeScript-Aware?</h2>
@@ -380,7 +454,7 @@ <h2 class="text-3xl sm:text-4xl font-bold mb-4 text-slate-900">Why TypeScript-Aw
380454
</section>
381455

382456
<!-- Rules Section -->
383-
<section class="py-20 bg-slate-50">
457+
<section class="py-20 section-gradient-2 decorative-dots">
384458
<div class="max-w-6xl mx-auto px-6">
385459
<div class="text-center mb-16">
386460
<h2 class="text-3xl sm:text-4xl font-bold mb-4 text-slate-900">8 Battle-Tested Rules</h2>
@@ -466,7 +540,7 @@ <h3 class="font-mono text-brand-600 group-hover:text-brand-700 transition-colors
466540
</section>
467541

468542
<!-- Quick Start Section -->
469-
<section id="quickstart" class="py-20 bg-white">
543+
<section id="quickstart" class="py-20 section-gradient-1">
470544
<div class="max-w-4xl mx-auto px-6">
471545
<div class="text-center mb-16">
472546
<h2 class="text-3xl sm:text-4xl font-bold mb-4 text-slate-900">Quick Start</h2>

0 commit comments

Comments
 (0)