Skip to content

Commit 372c456

Browse files
zh1pengzh1peng
committed
Polish landing page layout and typography
1 parent 097c6e7 commit 372c456

File tree

7 files changed

+95
-176
lines changed

7 files changed

+95
-176
lines changed

‎src/app/globals.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&family=Space+Grotesk:wght@400;500;600;700&display=swap");
1+
@import url("https://fonts.googleapis.com/css2?family=Baloo+2:wght@600;700;800&family=DM+Sans:wght@400;500;700&display=swap");
22

33
@tailwind base;
44
@tailwind components;

‎src/app/page.tsx‎

Lines changed: 18 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -119,11 +119,16 @@ export default function Page() {
119119
</p>
120120

121121
<div className="mt-8 flex flex-wrap gap-4">
122-
<Link className="tb-focus-ring tb-button-primary" href="/tasks/">
123-
Open Task Explorer
124-
</Link>
125-
<Link className="tb-focus-ring tb-button-secondary" href="#overview">
126-
See Overview
122+
<a
123+
className="tb-focus-ring tb-button-primary"
124+
href="https://taskbeacon.github.io/psyflow-web"
125+
target="_blank"
126+
rel="noreferrer"
127+
>
128+
Preview Tasks
129+
</a>
130+
<Link className="tb-focus-ring tb-button-secondary" href="/tasks/">
131+
See Tasks
127132
</Link>
128133
</div>
129134

@@ -152,16 +157,18 @@ export default function Page() {
152157
<div className="text-center">
153158
<div className="tb-section-chip">Overview</div>
154159
<h2 className="mt-5 font-heading text-4xl font-bold text-[#25314d]">
155-
The Main Building Blocks Of TaskBeacon
160+
Explore The Main TaskBeacon Sections
156161
</h2>
157162
<p className="mt-3 text-base text-slate-600">
158-
Start here for the big picture, then jump into the section that matches your current task.
163+
Start here for the big picture, then jump into the section you need next.
159164
</p>
160165
</div>
161166

162-
<div className="grid gap-5 md:grid-cols-2 xl:grid-cols-3">
163-
{overviewResources.map((card) => (
164-
<ResourceCard key={card.title} {...card} />
167+
<div className="grid gap-5 md:grid-cols-2">
168+
{overviewResources.map((card, index) => (
169+
<div key={card.title} className={index === overviewResources.length - 1 ? "md:col-span-2" : undefined}>
170+
<ResourceCard {...card} />
171+
</div>
165172
))}
166173
</div>
167174
</section>
@@ -271,7 +278,7 @@ export default function Page() {
271278
</h2>
272279
<p className="mt-4 text-base leading-8 text-slate-700">
273280
Contribution should start with a clear registry path, explicit variant handling, and
274-
docs that remain usable before somebody opens the source code.
281+
docs that stay usable before someone opens the source code.
275282
</p>
276283
<div className="mt-6">
277284
<Link className="tb-focus-ring tb-button-primary" href="/contribute/">

‎src/components/featured-task-carousel.tsx‎

Lines changed: 21 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
"use client";
22

3-
import Link from "next/link";
43
import { useEffect, useState } from "react";
54
import { IconChevronLeft, IconChevronRight, IconPlay } from "@/components/icons";
65
import { MaturityBadge } from "@/components/maturity-badge";
@@ -48,36 +47,25 @@ export function FeaturedTaskCarousel({
4847

4948
return (
5049
<>
51-
<div className="tb-frame bg-[#fffdf9] p-6">
52-
<div className="flex flex-wrap items-center justify-between gap-3">
53-
<div>
54-
<div className="text-sm font-bold text-slate-600">Featured Tasks</div>
55-
<div className="mt-1 font-heading text-3xl font-bold text-[#25314d]">
56-
Rotate through flagship paradigms
57-
</div>
58-
</div>
59-
60-
<div className="flex items-center gap-2">
61-
<button
62-
type="button"
63-
className="tb-focus-ring tb-button-ghost p-3"
64-
onClick={() => goTo(activeIndex - 1)}
65-
aria-label="Show previous featured task"
66-
>
67-
<IconChevronLeft className="size-4" />
68-
</button>
69-
<button
70-
type="button"
71-
className="tb-focus-ring tb-button-ghost p-3"
72-
onClick={() => goTo(activeIndex + 1)}
73-
aria-label="Show next featured task"
74-
>
75-
<IconChevronRight className="size-4" />
76-
</button>
77-
</div>
78-
</div>
79-
80-
<div className="mt-5 flex flex-wrap gap-2">
50+
<div className="relative tb-frame bg-[#fffdf9] px-6 py-8">
51+
<button
52+
type="button"
53+
className="tb-focus-ring absolute left-3 top-1/2 z-10 -translate-y-1/2 rounded-full border-2 border-[#25314d] bg-white p-3 shadow-[0_4px_0_#25314d] lg:-left-5"
54+
onClick={() => goTo(activeIndex - 1)}
55+
aria-label="Show previous featured task"
56+
>
57+
<IconChevronLeft className="size-4" />
58+
</button>
59+
<button
60+
type="button"
61+
className="tb-focus-ring absolute right-3 top-1/2 z-10 -translate-y-1/2 rounded-full border-2 border-[#25314d] bg-white p-3 shadow-[0_4px_0_#25314d] lg:-right-5"
62+
onClick={() => goTo(activeIndex + 1)}
63+
aria-label="Show next featured task"
64+
>
65+
<IconChevronRight className="size-4" />
66+
</button>
67+
68+
<div className="flex flex-wrap justify-center gap-2">
8169
{tasks.map((task, index) => (
8270
<button
8371
key={task.repo}
@@ -94,15 +82,15 @@ export function FeaturedTaskCarousel({
9482
))}
9583
</div>
9684

97-
<div className="mt-5 tb-frame-soft bg-[#f8fcff] p-5">
85+
<div className="mt-5 tb-frame-soft bg-[#f8fcff] p-5 sm:px-8">
9886
<div className="flex flex-wrap items-center gap-2 text-xs text-slate-600">
9987
<code className="rounded-full border-2 border-[#25314d] bg-white px-2.5 py-1 font-mono text-[11px] font-semibold text-[#25314d]">
10088
{taskHandle(activeTask)}
10189
</code>
10290
{activeTask.maturity ? <MaturityBadge maturity={activeTask.maturity} /> : null}
10391
{preview ? (
10492
<span className="rounded-full bg-[#ecffe5] px-3 py-1 text-[11px] font-bold text-[#25314d]">
105-
Preview available
93+
Preview ready
10694
</span>
10795
) : null}
10896
<span className="rounded-full bg-[#e2f3fb] px-3 py-1 text-[11px] font-bold text-[#25314d]">
@@ -139,15 +127,6 @@ export function FeaturedTaskCarousel({
139127
) : null}
140128
</div>
141129
</div>
142-
143-
<div className="mt-6 flex flex-wrap items-center justify-between gap-4">
144-
<div className="text-sm leading-6 text-slate-700">
145-
Highlighted here: BART, SST, and MID as fast entry points into the broader task catalog.
146-
</div>
147-
<Link className="tb-focus-ring tb-button-primary" href="/tasks/">
148-
Continue to Tasks
149-
</Link>
150-
</div>
151130
</div>
152131

153132
<TaskDrawer task={drawerTask} onClose={() => setDrawerRepo(null)} />

‎src/components/resource-card.tsx‎

Lines changed: 21 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -27,28 +27,35 @@ export function ResourceCard({
2727

2828
const body = (
2929
<>
30-
<div className="flex items-start justify-between gap-4">
31-
<span className={`rounded-full px-3 py-1 text-xs font-bold text-[#25314d] ${tone.pill}`}>
32-
{eyebrow}
33-
</span>
30+
<div className="flex items-start gap-4">
3431
<span
35-
className={`mt-1 block h-3 w-14 shrink-0 rounded-full border-2 border-[#25314d] ${tone.bg}`}
32+
className={`mt-1 block size-14 shrink-0 rounded-[18px] border-2 border-[#25314d] ${tone.bg} shadow-[0_4px_0_#25314d]`}
3633
aria-hidden="true"
3734
/>
38-
</div>
35+
<div className="min-w-0 flex-1">
36+
<div className="flex flex-wrap items-start justify-between gap-3">
37+
<span className={`rounded-full px-3 py-1 text-xs font-bold text-[#25314d] ${tone.pill}`}>
38+
{eyebrow}
39+
</span>
40+
<span className="text-xs font-bold uppercase tracking-[0.18em] text-slate-500">
41+
Resource
42+
</span>
43+
</div>
3944

40-
<div className="mt-4 font-heading text-2xl font-bold leading-tight text-[#25314d] sm:text-[1.95rem]">
41-
{title}
42-
</div>
43-
<div className="mt-3 text-sm leading-6 text-slate-700">{description}</div>
44-
<div className="mt-5 inline-flex items-center gap-2 text-sm font-bold text-[#25314d]">
45-
{cta}
46-
<IconArrowRight className="size-4" />
45+
<div className="mt-3 font-heading text-[1.75rem] font-bold leading-tight text-[#25314d]">
46+
{title}
47+
</div>
48+
<div className="mt-2 max-w-[34ch] text-sm leading-6 text-slate-700">{description}</div>
49+
<div className="mt-4 inline-flex items-center gap-2 text-sm font-bold text-[#25314d]">
50+
{cta}
51+
<IconArrowRight className="size-4" />
52+
</div>
53+
</div>
4754
</div>
4855
</>
4956
);
5057

51-
const className = "tb-frame-soft flex min-h-[240px] flex-col justify-between p-5";
58+
const className = "tb-frame-soft flex min-h-[190px] flex-col justify-between p-5";
5259

5360
if (external) {
5461
return (

‎src/components/site-footer.tsx‎

Lines changed: 11 additions & 85 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import Link from "next/link";
21
import { getIndex } from "@/lib/task-index";
32

43
export function SiteFooter() {
@@ -10,93 +9,20 @@ export function SiteFooter() {
109
<footer className="mt-16 bg-[#efe7de]">
1110
<div className="mx-auto w-full max-w-7xl px-4 py-12 sm:px-6 lg:px-8">
1211
<div className="tb-frame bg-[#fff8f0] px-6 py-8">
13-
<div className="grid gap-8 lg:grid-cols-[0.78fr_1.22fr]">
14-
<div className="max-w-2xl">
15-
<div className="font-heading text-3xl font-bold text-[#25314d]">TaskBeacon</div>
16-
<div className="mt-3 text-sm leading-7 text-slate-700">
17-
Canonical tasks, aligned previews, framework references, and automation-ready
18-
workflows for reusable cognitive task development.
19-
</div>
20-
<div className="mt-6 text-xs font-bold uppercase tracking-[0.18em] text-slate-500">
21-
Static index updated {new Date(index.generated_at).toLocaleDateString("en-US")}
22-
</div>
23-
</div>
24-
25-
<div className="grid gap-4 md:grid-cols-3">
26-
<article className="tb-frame-soft bg-white p-4">
27-
<div className="text-[11px] font-bold uppercase tracking-[0.18em] text-slate-500">
28-
Catalog
29-
</div>
30-
<div className="mt-3 font-heading text-2xl font-bold text-[#25314d]">
31-
{tasks.length} tasks, {previewCount} previews
32-
</div>
33-
<div className="mt-2 text-sm leading-6 text-slate-700">
34-
Open the explorer when you need the full catalog, filters, and README-backed details.
35-
</div>
36-
<div className="mt-4">
37-
<Link className="tb-focus-ring tb-button-secondary" href="/tasks/">
38-
Open Tasks
39-
</Link>
40-
</div>
41-
</article>
42-
43-
<article className="tb-frame-soft bg-white p-4">
44-
<div className="text-[11px] font-bold uppercase tracking-[0.18em] text-slate-500">
45-
Standards
46-
</div>
47-
<div className="mt-3 font-heading text-2xl font-bold text-[#25314d]">
48-
TAPS, PsyFlow, psyflow-web
49-
</div>
50-
<div className="mt-2 text-sm leading-6 text-slate-700">
51-
Read the structure standard, then move into the local and web runtime layers.
52-
</div>
53-
<div className="mt-4 flex flex-wrap gap-2">
54-
<a
55-
className="tb-focus-ring tb-button-ghost"
56-
href="https://github.com/TaskBeacon/taskbeacon.github.io/blob/main/source/taps.md"
57-
target="_blank"
58-
rel="noreferrer"
59-
>
60-
Read TAPS
61-
</a>
62-
<Link className="tb-focus-ring tb-button-secondary" href="/framework/">
63-
Framework
64-
</Link>
65-
</div>
66-
</article>
12+
<div className="font-heading text-3xl font-bold text-[#25314d]">TaskBeacon</div>
13+
<div className="mt-3 max-w-3xl text-sm leading-7 text-slate-700">
14+
Canonical tasks, aligned previews, framework references, skills, and contribution
15+
guidance for reusable cognitive task development.
16+
</div>
6717

68-
<article className="tb-frame-soft bg-white p-4">
69-
<div className="text-[11px] font-bold uppercase tracking-[0.18em] text-slate-500">
70-
Build
71-
</div>
72-
<div className="mt-3 font-heading text-2xl font-bold text-[#25314d]">
73-
Skills, tutorials, contribution
74-
</div>
75-
<div className="mt-2 text-sm leading-6 text-slate-700">
76-
Move from setup to localization, plotting, translation, and contribution without leaving the ecosystem.
77-
</div>
78-
<div className="mt-4 flex flex-wrap gap-2">
79-
<a
80-
className="tb-focus-ring tb-button-ghost"
81-
href="https://github.com/TaskBeacon/skills"
82-
target="_blank"
83-
rel="noreferrer"
84-
>
85-
Browse Skills
86-
</a>
87-
<Link className="tb-focus-ring tb-button-secondary" href="/contribute/">
88-
Contribute
89-
</Link>
90-
</div>
91-
</article>
92-
</div>
18+
<div className="mt-6 flex flex-wrap gap-6 text-sm text-slate-700">
19+
<div>{tasks.length} canonical tasks</div>
20+
<div>{previewCount} web previews</div>
21+
<div>Static index updated {new Date(index.generated_at).toLocaleDateString("en-US")}</div>
9322
</div>
9423

95-
<div className="mt-8 flex flex-wrap items-center justify-between gap-3 text-xs text-slate-600">
96-
<div>TaskBeacon GitHub organization remains the public source of truth for active repositories.</div>
97-
<a href="https://github.com/TaskBeacon" target="_blank" rel="noreferrer">
98-
Open GitHub Organization
99-
</a>
24+
<div className="mt-6 text-xs text-slate-600">
25+
TaskBeacon GitHub organization remains the public source of truth for active repositories.
10026
</div>
10127
</div>
10228
</div>

0 commit comments

Comments
 (0)