Skip to content

Commit 4ef7fd9

Browse files
HugoRCDHugoRCD
committed
docs: improve marketing and align with vercel web guidelines
1 parent d3395e9 commit 4ef7fd9

6 files changed

Lines changed: 78 additions & 54 deletions

File tree

‎apps/docs/app/components/LandingCode.vue‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -35,14 +35,14 @@ const activeErrorTab = ref<'code' | 'output'>('code')
3535
<div class="flex items-center justify-between border-b border-zinc-200 dark:border-zinc-800">
3636
<div class="flex">
3737
<button
38-
class="px-4 py-2.5 text-sm font-medium transition-colors"
38+
class="px-4 py-2.5 text-sm font-medium outline-none transition-colors focus-visible:ring-2 focus-visible:ring-evlog-blue focus-visible:ring-inset"
3939
:class="activeTab === 'code' ? 'bg-zinc-100 text-highlighted dark:bg-zinc-900' : 'text-muted hover:text-highlighted'"
4040
@click="activeTab = 'code'"
4141
>
4242
Code
4343
</button>
4444
<button
45-
class="px-4 py-2.5 text-sm font-medium transition-colors"
45+
class="px-4 py-2.5 text-sm font-medium outline-none transition-colors focus-visible:ring-2 focus-visible:ring-evlog-blue focus-visible:ring-inset"
4646
:class="activeTab === 'output' ? 'bg-zinc-100 text-highlighted dark:bg-zinc-900' : 'text-muted hover:text-highlighted'"
4747
@click="activeTab = 'output'"
4848
>
@@ -98,14 +98,14 @@ const activeErrorTab = ref<'code' | 'output'>('code')
9898
<div class="flex items-center justify-between border-b border-zinc-200 dark:border-zinc-800">
9999
<div class="flex">
100100
<button
101-
class="px-4 py-2.5 text-sm font-medium transition-colors"
101+
class="px-4 py-2.5 text-sm font-medium outline-none transition-colors focus-visible:ring-2 focus-visible:ring-evlog-blue focus-visible:ring-inset"
102102
:class="activeErrorTab === 'code' ? 'bg-zinc-100 text-highlighted dark:bg-zinc-900' : 'text-muted hover:text-highlighted'"
103103
@click="activeErrorTab = 'code'"
104104
>
105105
Code
106106
</button>
107107
<button
108-
class="px-4 py-2.5 text-sm font-medium transition-colors"
108+
class="px-4 py-2.5 text-sm font-medium outline-none transition-colors focus-visible:ring-2 focus-visible:ring-evlog-blue focus-visible:ring-inset"
109109
:class="activeErrorTab === 'output' ? 'bg-zinc-100 text-highlighted dark:bg-zinc-900' : 'text-muted hover:text-highlighted'"
110110
@click="activeErrorTab = 'output'"
111111
>

‎apps/docs/app/components/LandingComparison.vue‎

Lines changed: 15 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,12 @@
22
import { ref, onMounted, onUnmounted, nextTick } from 'vue'
33
import { Motion } from 'motion-v'
44
5+
const prefersReducedMotion = ref(false)
6+
7+
onMounted(() => {
8+
prefersReducedMotion.value = window.matchMedia('(prefers-reduced-motion: reduce)').matches
9+
})
10+
511
const mode = ref<'chaos' | 'clarity'>('chaos')
612
const isPaused = ref(false)
713
const chaosScrollRef = ref<HTMLElement | null>(null)
@@ -203,12 +209,12 @@ onUnmounted(() => {
203209
</script>
204210

205211
<template>
206-
<section class="relative py-32">
212+
<section id="problem" class="relative py-32">
207213
<div class="mx-auto max-w-4xl px-6">
208214
<Motion
209-
:initial="{ opacity: 0, y: 20 }"
215+
:initial="prefersReducedMotion ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }"
210216
:in-view="{ opacity: 1, y: 0 }"
211-
:transition="{ duration: 0.5 }"
217+
:transition="{ duration: prefersReducedMotion ? 0 : 0.5 }"
212218
:in-view-options="{ once: true }"
213219
class="mb-12 text-center"
214220
>
@@ -224,7 +230,7 @@ onUnmounted(() => {
224230
<div class="dark overflow-hidden rounded-lg border border-muted bg-[#09090b]">
225231
<div class="flex border-b border-muted">
226232
<button
227-
class="flex-1 px-4 py-2.5 text-xs font-medium outline-none transition-colors focus-visible:ring-1 focus-visible:ring-muted"
233+
class="flex-1 px-4 py-2.5 text-xs font-medium outline-none transition-colors focus-visible:ring-2 focus-visible:ring-evlog-blue focus-visible:ring-offset-1 focus-visible:ring-offset-zinc-900"
228234
:class="mode === 'chaos'
229235
? 'bg-accented text-highlighted'
230236
: 'text-muted hover:text-toned'"
@@ -233,7 +239,7 @@ onUnmounted(() => {
233239
Traditional Logging
234240
</button>
235241
<button
236-
class="flex-1 border-l border-muted px-4 py-2.5 text-xs font-medium outline-none transition-colors focus-visible:ring-1 focus-visible:ring-muted"
242+
class="flex-1 border-l border-muted px-4 py-2.5 text-xs font-medium outline-none transition-colors focus-visible:ring-2 focus-visible:ring-evlog-blue focus-visible:ring-offset-1 focus-visible:ring-offset-zinc-900"
237243
:class="mode === 'clarity'
238244
? 'bg-accented text-highlighted'
239245
: 'text-muted hover:text-toned'"
@@ -242,13 +248,13 @@ onUnmounted(() => {
242248
Wide Events
243249
</button>
244250
<button
245-
class="border-l border-muted px-3 py-2.5 text-xs outline-none transition-colors focus-visible:ring-1 focus-visible:ring-muted"
251+
class="border-l border-muted px-3 py-2.5 text-xs outline-none transition-colors focus-visible:ring-2 focus-visible:ring-evlog-blue focus-visible:ring-offset-1 focus-visible:ring-offset-zinc-900"
246252
:class="isPaused ? 'text-success' : 'text-muted hover:text-toned'"
247-
:title="isPaused ? 'Resume' : 'Pause'"
253+
:aria-label="isPaused ? 'Resume animation' : 'Pause animation'"
248254
@click="togglePause"
249255
>
250-
<span v-if="isPaused">▶</span>
251-
<span v-else>⏸</span>
256+
<span v-if="isPaused" aria-hidden="true">▶</span>
257+
<span v-else aria-hidden="true">⏸</span>
252258
</button>
253259
</div>
254260

‎apps/docs/app/components/LandingCta.vue‎

Lines changed: 14 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,11 @@
11
<script setup lang="ts">
22
import { Motion } from 'motion-v'
3+
4+
const prefersReducedMotion = ref(false)
5+
6+
onMounted(() => {
7+
prefersReducedMotion.value = window.matchMedia('(prefers-reduced-motion: reduce)').matches
8+
})
39
</script>
410

511
<template>
@@ -8,24 +14,24 @@ import { Motion } from 'motion-v'
814

915
<div class="mx-auto max-w-4xl px-6 text-center">
1016
<Motion
11-
:initial="{ opacity: 0, y: 20 }"
17+
:initial="prefersReducedMotion ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }"
1218
:in-view="{ opacity: 1, y: 0 }"
13-
:transition="{ duration: 0.5 }"
19+
:transition="{ duration: prefersReducedMotion ? 0 : 0.5 }"
1420
:in-view-options="{ once: true }"
1521
>
16-
<h2 class="editorial-title mb-6 text-3xl font-bold text-highlighted md:text-5xl">
22+
<h2 class="editorial-title mb-6 text-3xl font-bold text-highlighted md:text-5xl text-balance">
1723
Ready to fix your logging<span class="evlog-dot">?</span>
1824
</h2>
19-
<p class="mx-auto mb-10 max-w-xl text-lg text-muted">
20-
Inspired by <a href="https://loggingsucks.com/" target="_blank" class="underline underline-offset-4 hover:text-highlighted">Logging Sucks</a> by Boris Tane.
21-
One log per request. Everything you need.
25+
<p class="mx-auto mb-10 max-w-xl text-lg text-muted text-pretty">
26+
Stop grep-ing through scattered logs. Start shipping with confidence.
27+
Wide events, structured errors, zero config.
2228
</p>
2329
</Motion>
2430

2531
<Motion
26-
:initial="{ opacity: 0, y: 20 }"
32+
:initial="prefersReducedMotion ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }"
2733
:in-view="{ opacity: 1, y: 0 }"
28-
:transition="{ duration: 0.5, delay: 0.1 }"
34+
:transition="{ duration: prefersReducedMotion ? 0 : 0.5, delay: prefersReducedMotion ? 0 : 0.1 }"
2935
:in-view-options="{ once: true }"
3036
class="flex flex-col items-center justify-center gap-4 sm:flex-row"
3137
>

‎apps/docs/app/components/LandingFeatures.vue‎

Lines changed: 23 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,12 @@
11
<script setup lang="ts">
22
import { Motion } from 'motion-v'
33
4+
const prefersReducedMotion = ref(false)
5+
6+
onMounted(() => {
7+
prefersReducedMotion.value = window.matchMedia('(prefers-reduced-motion: reduce)').matches
8+
})
9+
410
const features = [
511
{
612
icon: 'i-lucide-layers',
@@ -13,24 +19,24 @@ const features = [
1319
description: 'Errors with why, fix, and link fields. Actionable context for debugging and resolution.',
1420
},
1521
{
16-
icon: 'i-lucide-git-branch',
17-
title: 'Request Scoping',
18-
description: 'Accumulate context throughout the request lifecycle. Emit once at the end with complete data.',
19-
},
20-
{
21-
icon: 'i-lucide-palette',
22-
title: 'Pretty for Dev, JSON for Prod',
23-
description: 'Human-readable logs in development, machine-parseable JSON in production.',
22+
icon: 'i-lucide-bot',
23+
title: 'Agent-Ready Logs',
24+
description: 'Structured output that AI agents can parse and understand. Perfect for agentic debugging and automated issue resolution.',
2425
},
2526
{
2627
icon: 'i-lucide-zap',
2728
title: 'Nuxt & Nitro Ready',
2829
description: 'First-class integration with Nuxt and Nitro. Auto-create loggers, auto-emit at request end.',
2930
},
3031
{
31-
icon: 'i-lucide-bot',
32-
title: 'Agent-Ready',
33-
description: 'Structured output that AI agents can parse. Perfect for automated debugging in the agentic era.',
32+
icon: 'i-lucide-filter',
33+
title: 'Smart Sampling',
34+
description: 'Head and tail sampling strategies. Keep errors, slow requests, and critical paths while reducing volume.',
35+
},
36+
{
37+
icon: 'i-lucide-palette',
38+
title: 'Pretty for Dev, JSON for Prod',
39+
description: 'Human-readable logs in development, machine-parseable JSON in production.',
3440
},
3541
]
3642
</script>
@@ -41,16 +47,16 @@ const features = [
4147

4248
<div class="mx-auto max-w-5xl px-6">
4349
<Motion
44-
:initial="{ opacity: 0, y: 20 }"
50+
:initial="prefersReducedMotion ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }"
4551
:in-view="{ opacity: 1, y: 0 }"
46-
:transition="{ duration: 0.5 }"
52+
:transition="{ duration: prefersReducedMotion ? 0 : 0.5 }"
4753
:in-view-options="{ once: true }"
4854
class="mb-20 text-center"
4955
>
50-
<h2 class="editorial-title mb-6 text-4xl font-bold text-highlighted md:text-5xl">
56+
<h2 class="editorial-title mb-6 text-4xl font-bold text-highlighted md:text-5xl text-balance">
5157
Why evlog<span class="evlog-dot">.</span>
5258
</h2>
53-
<p class="mx-auto max-w-xl text-lg text-muted">
59+
<p class="mx-auto max-w-xl text-lg text-muted text-pretty">
5460
Traditional logging is broken. Your logs are scattered, each request generates 10+ log lines,
5561
and when something goes wrong, you're grep-ing through noise hoping to find signal.
5662
</p>
@@ -60,9 +66,9 @@ const features = [
6066
<Motion
6167
v-for="(feature, index) in features"
6268
:key="feature.title"
63-
:initial="{ opacity: 0, y: 16 }"
69+
:initial="prefersReducedMotion ? { opacity: 1, y: 0 } : { opacity: 0, y: 16 }"
6470
:in-view="{ opacity: 1, y: 0 }"
65-
:transition="{ duration: 0.4, delay: index * 0.08 }"
71+
:transition="{ duration: prefersReducedMotion ? 0 : 0.4, delay: prefersReducedMotion ? 0 : index * 0.08 }"
6672
:in-view-options="{ once: true }"
6773
class="group"
6874
>

‎apps/docs/app/components/LandingHero.vue‎

Lines changed: 20 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,11 @@
11
<script setup lang="ts">
22
import { Motion } from 'motion-v'
3+
4+
const prefersReducedMotion = ref(false)
5+
6+
onMounted(() => {
7+
prefersReducedMotion.value = window.matchMedia('(prefers-reduced-motion: reduce)').matches
8+
})
39
</script>
410

511
<template>
@@ -17,41 +23,41 @@ import { Motion } from 'motion-v'
1723

1824
<div class="relative z-10 mx-auto max-w-4xl px-6 py-24 text-center">
1925
<Motion
20-
:initial="{ opacity: 0, y: -20 }"
26+
:initial="prefersReducedMotion ? { opacity: 1, y: 0 } : { opacity: 0, y: -20 }"
2127
:animate="{ opacity: 1, y: 0 }"
22-
:transition="{ duration: 0.6 }"
28+
:transition="{ duration: prefersReducedMotion ? 0 : 0.6 }"
2329
>
2430
<p class="mb-8 text-xs font-medium uppercase tracking-[0.3em] text-zinc-500">
2531
Wide Events & Structured Errors
2632
</p>
2733
</Motion>
2834

2935
<Motion
30-
:initial="{ opacity: 0, scale: 0.95 }"
36+
:initial="prefersReducedMotion ? { opacity: 1, scale: 1 } : { opacity: 0, scale: 0.95 }"
3137
:animate="{ opacity: 1, scale: 1 }"
32-
:transition="{ duration: 0.8, delay: 0.1 }"
38+
:transition="{ duration: prefersReducedMotion ? 0 : 0.8, delay: prefersReducedMotion ? 0 : 0.1 }"
3339
>
34-
<h1 class="editorial-title mb-10 text-5xl font-bold text-zinc-900 dark:text-white sm:text-6xl md:text-8xl">
40+
<h1 class="editorial-title mb-10 text-5xl font-bold text-zinc-900 dark:text-white sm:text-6xl md:text-8xl text-balance">
3541
Logging that<br>
3642
makes sense<span class="text-evlog-blue">.</span>
3743
</h1>
3844
</Motion>
3945

4046
<Motion
41-
:initial="{ opacity: 0, y: 20 }"
47+
:initial="prefersReducedMotion ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }"
4248
:animate="{ opacity: 1, y: 0 }"
43-
:transition="{ duration: 0.6, delay: 0.3 }"
49+
:transition="{ duration: prefersReducedMotion ? 0 : 0.6, delay: prefersReducedMotion ? 0 : 0.3 }"
4450
>
45-
<p class="mx-auto mb-14 max-w-xl text-lg text-zinc-600 dark:text-zinc-400 md:text-xl">
51+
<p class="mx-auto mb-14 max-w-xl text-lg text-zinc-600 dark:text-zinc-400 md:text-xl text-pretty">
4652
A TypeScript logging library that replaces scattered log lines with comprehensive wide events.
4753
One log per request, containing everything you need.
4854
</p>
4955
</Motion>
5056

5157
<Motion
52-
:initial="{ opacity: 0, y: 20 }"
58+
:initial="prefersReducedMotion ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }"
5359
:animate="{ opacity: 1, y: 0 }"
54-
:transition="{ duration: 0.6, delay: 0.5 }"
60+
:transition="{ duration: prefersReducedMotion ? 0 : 0.6, delay: prefersReducedMotion ? 0 : 0.5 }"
5561
class="flex flex-col items-center justify-center gap-4 sm:flex-row"
5662
>
5763
<UButton
@@ -75,14 +81,14 @@ import { Motion } from 'motion-v'
7581
</Motion>
7682

7783
<Motion
78-
:initial="{ opacity: 0 }"
84+
:initial="prefersReducedMotion ? { opacity: 1 } : { opacity: 0 }"
7985
:animate="{ opacity: 1 }"
80-
:transition="{ duration: 1, delay: 0.8 }"
86+
:transition="{ duration: prefersReducedMotion ? 0 : 1, delay: prefersReducedMotion ? 0 : 0.8 }"
8187
class="mt-20"
8288
>
83-
<a href="#features" class="group inline-flex flex-col items-center gap-2 text-zinc-400 transition-colors hover:text-zinc-900 dark:hover:text-white">
89+
<a href="#problem" class="group inline-flex flex-col items-center gap-2 text-zinc-400 transition-colors hover:text-zinc-900 dark:hover:text-white">
8490
<span class="text-xs uppercase tracking-widest">Scroll</span>
85-
<UIcon name="i-lucide-chevron-down" class="size-4 animate-bounce" />
91+
<UIcon name="i-lucide-chevron-down" :class="['size-4', prefersReducedMotion ? '' : 'animate-bounce']" />
8692
</a>
8793
</Motion>
8894
</div>

‎apps/docs/content/index.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,10 +8,10 @@ seo:
88
::landing-hero
99
::
1010

11-
::landing-features
11+
::landing-comparison
1212
::
1313

14-
::landing-comparison
14+
::landing-features
1515
::
1616

1717
::landing-code

0 commit comments

Comments
 (0)