Skip to content

Commit ca03742

Browse files
ComputelessComputerComputelessComputer
authored
style(footer): update layout and link styles for improved readability (#2039)
1 parent c5a6eca commit ca03742

File tree

1 file changed

+52
-27
lines changed

1 file changed

+52
-27
lines changed

‎apps/web/src/components/footer.tsx‎

Lines changed: 52 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -17,8 +17,8 @@ export function Footer() {
1717
<div
1818
className={`${maxWidthClass} mx-auto px-4 laptop:px-0 py-12 lg:py-16 border-x border-neutral-100`}
1919
>
20-
<div className="grid md:grid-cols-2 gap-12">
21-
<div>
20+
<div className="flex flex-col lg:flex-row gap-12">
21+
<div className="lg:flex-1">
2222
<Link to="/" className="inline-block mb-4">
2323
<img
2424
src="/api/images/hyprnote/logo.svg"
@@ -33,7 +33,7 @@ export function Footer() {
3333
Are you in back-to-back meetings?{" "}
3434
<Link
3535
to="/join-waitlist"
36-
className="text-neutral-600 hover:text-stone-600 transition-colors underline"
36+
className="text-neutral-600 hover:text-stone-600 transition-colors underline decoration-dotted hover:decoration-solid"
3737
>
3838
Get started
3939
</Link>
@@ -42,22 +42,22 @@ export function Footer() {
4242
<Link
4343
to="/legal/$slug"
4444
params={{ slug: "terms" }}
45-
className="hover:text-stone-600 transition-colors underline"
45+
className="hover:text-stone-600 transition-colors underline decoration-dotted hover:decoration-solid"
4646
>
4747
Terms
4848
</Link>
4949
{" · "}
5050
<Link
5151
to="/legal/$slug"
5252
params={{ slug: "privacy" }}
53-
className="hover:text-stone-600 transition-colors underline"
53+
className="hover:text-stone-600 transition-colors underline decoration-dotted hover:decoration-solid"
5454
>
5555
Privacy
5656
</Link>
5757
</p>
5858
</div>
5959

60-
<div className="grid grid-cols-2 sm:grid-cols-4 gap-8">
60+
<div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-8 lg:flex-shrink-0">
6161
<div>
6262
<h3 className="text-sm font-semibold text-neutral-900 mb-4 font-serif">
6363
Product
@@ -66,31 +66,31 @@ export function Footer() {
6666
<li>
6767
<Link
6868
to="/download"
69-
className="text-sm text-neutral-600 hover:text-stone-600 transition-colors"
69+
className="text-sm text-neutral-600 hover:text-stone-600 transition-colors underline decoration-dotted hover:decoration-solid"
7070
>
7171
Download
7272
</Link>
7373
</li>
7474
<li>
7575
<Link
7676
to="/changelog"
77-
className="text-sm text-neutral-600 hover:text-stone-600 transition-colors"
77+
className="text-sm text-neutral-600 hover:text-stone-600 transition-colors underline decoration-dotted hover:decoration-solid"
7878
>
7979
Releases
8080
</Link>
8181
</li>
8282
<li>
8383
<Link
8484
to="/roadmap"
85-
className="text-sm text-neutral-600 hover:text-stone-600 transition-colors"
85+
className="text-sm text-neutral-600 hover:text-stone-600 transition-colors underline decoration-dotted hover:decoration-solid"
8686
>
8787
Roadmap
8888
</Link>
8989
</li>
9090
<li>
9191
<Link
9292
to="/docs"
93-
className="text-sm text-neutral-600 hover:text-stone-600 transition-colors"
93+
className="text-sm text-neutral-600 hover:text-stone-600 transition-colors underline decoration-dotted hover:decoration-solid"
9494
>
9595
Docs
9696
</Link>
@@ -100,7 +100,7 @@ export function Footer() {
100100
href="https://github.com/fastrepl/hyprnote"
101101
target="_blank"
102102
rel="noopener noreferrer"
103-
className="text-sm text-neutral-600 hover:text-stone-600 transition-colors inline-flex items-center gap-1"
103+
className="text-sm text-neutral-600 hover:text-stone-600 transition-colors inline-flex items-center gap-1 underline decoration-dotted hover:decoration-solid"
104104
>
105105
GitHub
106106
<ExternalLinkIcon className="size-3" />
@@ -111,7 +111,7 @@ export function Footer() {
111111
href="https://status.hyprnote.com"
112112
target="_blank"
113113
rel="noopener noreferrer"
114-
className="text-sm text-neutral-600 hover:text-stone-600 transition-colors inline-flex items-center gap-1"
114+
className="text-sm text-neutral-600 hover:text-stone-600 transition-colors inline-flex items-center gap-1 underline decoration-dotted hover:decoration-solid"
115115
>
116116
Status
117117
<ExternalLinkIcon className="size-3" />
@@ -128,15 +128,15 @@ export function Footer() {
128128
<li>
129129
<Link
130130
to="/faq"
131-
className="text-sm text-neutral-600 hover:text-stone-600 transition-colors"
131+
className="text-sm text-neutral-600 hover:text-stone-600 transition-colors underline decoration-dotted hover:decoration-solid"
132132
>
133133
FAQ
134134
</Link>
135135
</li>
136136
<li>
137137
<a
138138
href="mailto:[email protected]"
139-
className="text-sm text-neutral-600 hover:text-stone-600 transition-colors inline-flex items-center gap-1"
139+
className="text-sm text-neutral-600 hover:text-stone-600 transition-colors inline-flex items-center gap-1 underline decoration-dotted hover:decoration-solid"
140140
>
141141
Support
142142
<MailIcon className="size-3" />
@@ -147,7 +147,7 @@ export function Footer() {
147147
href="https://github.com/fastrepl/hyprnote/discussions"
148148
target="_blank"
149149
rel="noopener noreferrer"
150-
className="text-sm text-neutral-600 hover:text-stone-600 transition-colors inline-flex items-center gap-1"
150+
className="text-sm text-neutral-600 hover:text-stone-600 transition-colors inline-flex items-center gap-1 underline decoration-dotted hover:decoration-solid"
151151
>
152152
Discussions
153153
<ExternalLinkIcon className="size-3" />
@@ -156,15 +156,15 @@ export function Footer() {
156156
<li>
157157
<Link
158158
to="/pricing"
159-
className="text-sm text-neutral-600 hover:text-stone-600 transition-colors"
159+
className="text-sm text-neutral-600 hover:text-stone-600 transition-colors underline decoration-dotted hover:decoration-solid"
160160
>
161161
Pricing
162162
</Link>
163163
</li>
164164
<li>
165165
<Link
166166
to="/gallery"
167-
className="text-sm text-neutral-600 hover:text-stone-600 transition-colors"
167+
className="text-sm text-neutral-600 hover:text-stone-600 transition-colors underline decoration-dotted hover:decoration-solid"
168168
>
169169
Prompt Gallery
170170
</Link>
@@ -180,46 +180,71 @@ export function Footer() {
180180
<li>
181181
<Link
182182
to="/blog"
183-
className="text-sm text-neutral-600 hover:text-stone-600 transition-colors"
183+
className="text-sm text-neutral-600 hover:text-stone-600 transition-colors underline decoration-dotted hover:decoration-solid"
184184
>
185185
Blog
186186
</Link>
187187
</li>
188188
<li>
189189
<Link
190190
to="/about"
191-
className="text-sm text-neutral-600 hover:text-stone-600 transition-colors"
191+
className="text-sm text-neutral-600 hover:text-stone-600 transition-colors underline decoration-dotted hover:decoration-solid"
192192
>
193193
About us
194194
</Link>
195195
</li>
196196
<li>
197197
<Link
198198
to="/brand"
199-
className="text-sm text-neutral-600 hover:text-stone-600 transition-colors"
199+
className="text-sm text-neutral-600 hover:text-stone-600 transition-colors underline decoration-dotted hover:decoration-solid"
200200
>
201201
Brand
202202
</Link>
203203
</li>
204204
<li>
205205
<Link
206206
to="/press-kit"
207-
className="text-sm text-neutral-600 hover:text-stone-600 transition-colors"
207+
className="text-sm text-neutral-600 hover:text-stone-600 transition-colors underline decoration-dotted hover:decoration-solid"
208208
>
209209
Press Kit
210210
</Link>
211211
</li>
212212
<li>
213213
<Link
214214
to="/opensource"
215-
className="text-sm text-neutral-600 hover:text-stone-600 transition-colors"
215+
className="text-sm text-neutral-600 hover:text-stone-600 transition-colors underline decoration-dotted hover:decoration-solid"
216216
>
217217
Open Source
218218
</Link>
219219
</li>
220220
</ul>
221221
</div>
222222

223+
<div>
224+
<h3 className="text-sm font-semibold text-neutral-900 mb-4 font-serif">
225+
Tools
226+
</h3>
227+
<ul className="space-y-3">
228+
<li>
229+
<Link
230+
to="/file-transcription"
231+
search={{ id: undefined }}
232+
className="text-sm text-neutral-600 hover:text-stone-600 transition-colors underline decoration-dotted hover:decoration-solid"
233+
>
234+
Audio Transcription
235+
</Link>
236+
</li>
237+
<li>
238+
<Link
239+
to="/oss-friends"
240+
className="text-sm text-neutral-600 hover:text-stone-600 transition-colors underline decoration-dotted hover:decoration-solid"
241+
>
242+
OSS Navigator
243+
</Link>
244+
</li>
245+
</ul>
246+
</div>
247+
223248
<div>
224249
<h3 className="text-sm font-semibold text-neutral-900 mb-4 font-serif">
225250
Social
@@ -230,7 +255,7 @@ export function Footer() {
230255
href="/x"
231256
target="_blank"
232257
rel="noopener noreferrer"
233-
className="text-sm text-neutral-600 hover:text-stone-600 transition-colors inline-flex items-center gap-1"
258+
className="text-sm text-neutral-600 hover:text-stone-600 transition-colors inline-flex items-center gap-1 underline decoration-dotted hover:decoration-solid"
234259
>
235260
Twitter
236261
<ExternalLinkIcon className="size-3" />
@@ -241,7 +266,7 @@ export function Footer() {
241266
href="https://bsky.app/profile/hyprnote.bsky.social"
242267
target="_blank"
243268
rel="noopener noreferrer"
244-
className="text-sm text-neutral-600 hover:text-stone-600 transition-colors inline-flex items-center gap-1"
269+
className="text-sm text-neutral-600 hover:text-stone-600 transition-colors inline-flex items-center gap-1 underline decoration-dotted hover:decoration-solid"
245270
>
246271
Bluesky
247272
<ExternalLinkIcon className="size-3" />
@@ -252,7 +277,7 @@ export function Footer() {
252277
href="https://www.reddit.com/r/Hyprnote/"
253278
target="_blank"
254279
rel="noopener noreferrer"
255-
className="text-sm text-neutral-600 hover:text-stone-600 transition-colors inline-flex items-center gap-1"
280+
className="text-sm text-neutral-600 hover:text-stone-600 transition-colors inline-flex items-center gap-1 underline decoration-dotted hover:decoration-solid"
256281
>
257282
Reddit
258283
<ExternalLinkIcon className="size-3" />
@@ -263,7 +288,7 @@ export function Footer() {
263288
href="/discord"
264289
target="_blank"
265290
rel="noopener noreferrer"
266-
className="text-sm text-neutral-600 hover:text-stone-600 transition-colors inline-flex items-center gap-1"
291+
className="text-sm text-neutral-600 hover:text-stone-600 transition-colors inline-flex items-center gap-1 underline decoration-dotted hover:decoration-solid"
267292
>
268293
Discord
269294
<ExternalLinkIcon className="size-3" />
@@ -274,7 +299,7 @@ export function Footer() {
274299
href="/youtube"
275300
target="_blank"
276301
rel="noopener noreferrer"
277-
className="text-sm text-neutral-600 hover:text-stone-600 transition-colors inline-flex items-center gap-1"
302+
className="text-sm text-neutral-600 hover:text-stone-600 transition-colors inline-flex items-center gap-1 underline decoration-dotted hover:decoration-solid"
278303
>
279304
YouTube
280305
<ExternalLinkIcon className="size-3" />

0 commit comments

Comments
 (0)