Skip to content

Commit 076df59

Browse files
zh1pengzh1peng
committed
Refine hero layout and shared branding
1 parent 372c456 commit 076df59

12 files changed

Lines changed: 218 additions & 148 deletions

‎src/app/_components/gallery-client.tsx‎

Lines changed: 15 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,6 @@ import { TagChip } from "@/components/tag-chip";
1212
import { TaskRow } from "@/components/task-row";
1313
import { TaskDrawer } from "@/components/task-drawer";
1414
import { formatMaturityLabel } from "@/components/maturity-badge";
15-
import { formatIsoDateTime } from "@/lib/format";
1615

1716
function FacetSection({
1817
title,
@@ -63,11 +62,9 @@ function FacetSection({
6362
}
6463

6564
export function GalleryClient({
66-
tasks,
67-
generatedAt
65+
tasks
6866
}: {
6967
tasks: TaskIndexItem[];
70-
generatedAt: string;
7168
}) {
7269
const [query, setQuery] = useState<string>("");
7370
const [selected, setSelected] = useState<SelectedFacets>(() => emptySelectedFacets());
@@ -128,49 +125,28 @@ export function GalleryClient({
128125

129126
return (
130127
<section className="space-y-8">
131-
<div className="grid gap-8 lg:grid-cols-[1fr_360px] lg:items-center">
132-
<div>
133-
<div className="tb-badge">Task Explorer</div>
134-
<div className="mt-5 font-heading text-5xl font-bold leading-[0.94] text-[#25314d] sm:text-6xl">
128+
<div className="max-w-4xl">
129+
<div className="tb-section-chip bg-[#f5d7cf]">Task Explorer</div>
130+
<div className="mt-5 font-heading text-5xl font-bold leading-[0.94] text-[#25314d] sm:text-6xl">
135131
Find The Right Task,
136132
<br />
137133
<span className="text-[#39d95d]">Filter Faster,</span>
138134
<br />
139135
Expand Only What Matters.
140-
</div>
141-
<div className="mt-5 max-w-2xl text-base leading-8 text-slate-700">
142-
This explorer keeps the denser list workflow while adopting the clearer, stronger page
143-
language from the rest of the site.
144-
</div>
145-
146-
<div className="mt-8 flex flex-wrap gap-8">
147-
<div>
148-
<div className="font-heading text-3xl font-bold text-[#25314d]">{tasks.length}</div>
149-
<div className="text-sm text-slate-600">Total tasks</div>
150-
</div>
151-
<div>
152-
<div className="font-heading text-3xl font-bold text-[#25314d]">{previewCount}</div>
153-
<div className="text-sm text-slate-600">With preview</div>
154-
</div>
155-
</div>
136+
</div>
137+
<div className="mt-5 max-w-2xl text-base leading-8 text-slate-700">
138+
This explorer keeps the denser list workflow while adopting the clearer, stronger page
139+
language from the rest of the site.
156140
</div>
157141

158-
<div className="tb-frame bg-[#fffdf9] p-5">
159-
<div className="text-sm font-bold text-slate-600">Quick Snapshot</div>
160-
<div className="mt-3 font-heading text-2xl font-bold text-[#25314d]">
161-
Explorer Updated
142+
<div className="mt-8 flex flex-wrap gap-4">
143+
<div className="tb-frame-soft min-w-[160px] bg-[#fffdf9] px-5 py-4">
144+
<div className="font-heading text-3xl font-bold text-[#25314d]">{tasks.length}</div>
145+
<div className="text-sm text-slate-600">Total tasks</div>
162146
</div>
163-
<div className="mt-2 text-sm text-slate-600">{formatIsoDateTime(generatedAt)}</div>
164-
165-
<div className="mt-5 space-y-3">
166-
<div className="tb-frame-soft bg-[#eef8ff] px-4 py-3">
167-
<div className="text-xs font-bold uppercase tracking-[0.18em] text-slate-500">Order</div>
168-
<div className="mt-1 text-sm font-bold text-[#25314d]">Alphabetical by task title</div>
169-
</div>
170-
<div className="tb-frame-soft bg-[#fff8f0] px-4 py-3">
171-
<div className="text-xs font-bold uppercase tracking-[0.18em] text-slate-500">Details</div>
172-
<div className="mt-1 text-sm font-bold text-[#25314d]">Expand from Local / PsyFlow only</div>
173-
</div>
147+
<div className="tb-frame-soft min-w-[160px] bg-[#eef8ff] px-5 py-4">
148+
<div className="font-heading text-3xl font-bold text-[#25314d]">{previewCount}</div>
149+
<div className="text-sm text-slate-600">With preview</div>
174150
</div>
175151
</div>
176152
</div>

‎src/app/globals.css‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -75,20 +75,21 @@ body {
7575
align-items: center;
7676
gap: 0.45rem;
7777
border-radius: 999px;
78-
background: #c9f7b9;
78+
background: #f8d8cf;
7979
color: var(--tb-ink);
8080
padding: 0.4rem 0.75rem;
8181
font-size: 0.72rem;
8282
font-weight: 700;
8383
line-height: 1;
84+
box-shadow: inset 0 0 0 1px rgba(37, 49, 77, 0.12);
8485
}
8586

8687
.tb-badge::before {
8788
content: "";
8889
width: 0.42rem;
8990
height: 0.42rem;
9091
border-radius: 999px;
91-
background: var(--tb-mint-dark);
92+
background: #7caecc;
9293
}
9394

9495
.tb-section-chip {

‎src/app/page.tsx‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -103,9 +103,9 @@ export default function Page() {
103103

104104
return (
105105
<div className="space-y-20 pb-8">
106-
<section className="grid gap-12 lg:grid-cols-[1.02fr_0.98fr] lg:items-center">
106+
<section className="grid gap-12 lg:grid-cols-[minmax(0,1fr)_590px] lg:items-center xl:gap-16">
107107
<div>
108-
<div className="tb-badge">New: canonical tasks, previews, docs, and skills</div>
108+
<div className="tb-badge mx-auto w-fit">New: canonical tasks, previews, docs, and skills</div>
109109
<h1 className="mt-6 max-w-3xl font-heading text-5xl font-bold leading-[0.92] text-[#25314d] sm:text-6xl">
110110
Build Better Tasks,
111111
<br />
@@ -150,7 +150,9 @@ export default function Page() {
150150
</div>
151151
</div>
152152

153-
<FeaturedTaskCarousel tasks={curatedFeaturedTasks} />
153+
<div className="lg:justify-self-end">
154+
<FeaturedTaskCarousel tasks={curatedFeaturedTasks} />
155+
</div>
154156
</section>
155157

156158
<section id="overview" className="space-y-8">
@@ -165,8 +167,8 @@ export default function Page() {
165167
</div>
166168

167169
<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+
{overviewResources.map((card) => (
171+
<div key={card.title}>
170172
<ResourceCard {...card} />
171173
</div>
172174
))}

‎src/app/tasks/page.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,5 +10,5 @@ export const metadata: Metadata = {
1010
export default function TasksPage() {
1111
const index = getIndex();
1212

13-
return <GalleryClient tasks={index.tasks ?? []} generatedAt={index.generated_at} />;
13+
return <GalleryClient tasks={index.tasks ?? []} />;
1414
}

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

Lines changed: 82 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -47,84 +47,106 @@ export function FeaturedTaskCarousel({
4747

4848
return (
4949
<>
50-
<div className="relative tb-frame bg-[#fffdf9] px-6 py-8">
50+
<div className="relative mx-auto w-full max-w-[590px]">
5151
<button
5252
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"
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] sm:left-0 sm:-translate-x-1/2"
5454
onClick={() => goTo(activeIndex - 1)}
5555
aria-label="Show previous featured task"
5656
>
5757
<IconChevronLeft className="size-4" />
5858
</button>
5959
<button
6060
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"
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] sm:right-0 sm:translate-x-1/2"
6262
onClick={() => goTo(activeIndex + 1)}
6363
aria-label="Show next featured task"
6464
>
6565
<IconChevronRight className="size-4" />
6666
</button>
67+
<div className="tb-frame h-[410px] overflow-visible bg-[#fffdf9] px-6 py-7 sm:h-[450px] sm:px-8">
68+
<div className="flex h-full flex-col">
69+
<div className="flex flex-wrap justify-center gap-2">
70+
{tasks.map((task, index) => (
71+
<button
72+
key={task.repo}
73+
type="button"
74+
className={
75+
index === activeIndex
76+
? "tb-focus-ring rounded-full border-2 border-[#25314d] bg-[#d7ebf6] px-3 py-1.5 text-sm font-bold text-[#25314d] shadow-[0_4px_0_#25314d]"
77+
: "tb-focus-ring rounded-full border-2 border-[#25314d] bg-white px-3 py-1.5 text-sm font-bold text-[#25314d]"
78+
}
79+
onClick={() => setActiveIndex(index)}
80+
>
81+
{task.tags?.paradigm?.[0] ?? taskHandle(task)}
82+
</button>
83+
))}
84+
</div>
6785

68-
<div className="flex flex-wrap justify-center gap-2">
69-
{tasks.map((task, index) => (
70-
<button
71-
key={task.repo}
72-
type="button"
73-
className={
74-
index === activeIndex
75-
? "tb-focus-ring rounded-full border-2 border-[#25314d] bg-[#d7ebf6] px-3 py-1.5 text-sm font-bold text-[#25314d] shadow-[0_4px_0_#25314d]"
76-
: "tb-focus-ring rounded-full border-2 border-[#25314d] bg-white px-3 py-1.5 text-sm font-bold text-[#25314d]"
77-
}
78-
onClick={() => setActiveIndex(index)}
79-
>
80-
{task.tags?.paradigm?.[0] ?? taskHandle(task)}
81-
</button>
82-
))}
83-
</div>
84-
85-
<div className="mt-5 tb-frame-soft bg-[#f8fcff] p-5 sm:px-8">
86-
<div className="flex flex-wrap items-center gap-2 text-xs text-slate-600">
87-
<code className="rounded-full border-2 border-[#25314d] bg-white px-2.5 py-1 font-mono text-[11px] font-semibold text-[#25314d]">
88-
{taskHandle(activeTask)}
89-
</code>
90-
{activeTask.maturity ? <MaturityBadge maturity={activeTask.maturity} /> : null}
91-
{preview ? (
92-
<span className="rounded-full bg-[#ecffe5] px-3 py-1 text-[11px] font-bold text-[#25314d]">
93-
Preview ready
94-
</span>
95-
) : null}
96-
<span className="rounded-full bg-[#e2f3fb] px-3 py-1 text-[11px] font-bold text-[#25314d]">
97-
{formatShortDate(activeTask.last_updated)}
98-
</span>
99-
</div>
86+
<div className="mt-6 flex-1">
87+
<div className="tb-frame-soft flex h-full flex-col bg-[#f8fcff] p-5 sm:p-6">
88+
<div className="flex flex-wrap items-center gap-2 text-xs text-slate-600">
89+
<code className="rounded-full border-2 border-[#25314d] bg-white px-2.5 py-1 font-mono text-[11px] font-semibold text-[#25314d]">
90+
{taskHandle(activeTask)}
91+
</code>
92+
{activeTask.maturity ? <MaturityBadge maturity={activeTask.maturity} /> : null}
93+
{preview ? (
94+
<span className="rounded-full bg-[#ecffe5] px-3 py-1 text-[11px] font-bold text-[#25314d]">
95+
Preview ready
96+
</span>
97+
) : null}
98+
<span className="rounded-full bg-[#e2f3fb] px-3 py-1 text-[11px] font-bold text-[#25314d]">
99+
{formatShortDate(activeTask.last_updated)}
100+
</span>
101+
</div>
100102

101-
<div className="mt-4 font-heading text-3xl font-bold leading-tight text-[#25314d]">
102-
{taskTitle(activeTask)}
103-
</div>
103+
<div className="mt-4 min-h-[6.1rem] font-heading text-3xl font-bold leading-tight text-[#25314d] sm:text-[2.65rem]">
104+
<span
105+
style={{
106+
display: "-webkit-box",
107+
WebkitLineClamp: 2,
108+
WebkitBoxOrient: "vertical",
109+
overflow: "hidden"
110+
}}
111+
>
112+
{taskTitle(activeTask)}
113+
</span>
114+
</div>
104115

105-
<p className="mt-3 max-w-2xl text-sm leading-7 text-slate-700 sm:text-base">
106-
{activeTask.short_description}
107-
</p>
116+
<p
117+
className="mt-3 min-h-[4.8rem] max-w-[36ch] text-sm leading-7 text-slate-700 sm:text-base"
118+
style={{
119+
display: "-webkit-box",
120+
WebkitLineClamp: 3,
121+
WebkitBoxOrient: "vertical",
122+
overflow: "hidden"
123+
}}
124+
>
125+
{activeTask.short_description}
126+
</p>
108127

109-
<div className="mt-6 flex flex-wrap gap-3">
110-
<button
111-
type="button"
112-
className="tb-focus-ring tb-button-primary"
113-
onClick={() => setDrawerRepo(activeTask.repo)}
114-
>
115-
Expand details
116-
</button>
117-
{preview ? (
118-
<a
119-
className="tb-focus-ring tb-button-secondary bg-[#d7ebf6]"
120-
href={preview.run_url}
121-
target="_blank"
122-
rel="noreferrer"
123-
>
124-
<IconPlay className="size-4" />
125-
Run Preview
126-
</a>
127-
) : null}
128+
<div className="mt-auto flex flex-wrap gap-3">
129+
<button
130+
type="button"
131+
className="tb-focus-ring tb-button-primary"
132+
onClick={() => setDrawerRepo(activeTask.repo)}
133+
>
134+
Expand details
135+
</button>
136+
{preview ? (
137+
<a
138+
className="tb-focus-ring tb-button-secondary bg-[#d7ebf6]"
139+
href={preview.run_url}
140+
target="_blank"
141+
rel="noreferrer"
142+
>
143+
<IconPlay className="size-4" />
144+
Run Preview
145+
</a>
146+
) : null}
147+
</div>
148+
</div>
149+
</div>
128150
</div>
129151
</div>
130152
</div>

‎src/components/resource-card.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,7 @@ export function ResourceCard({
5555
</>
5656
);
5757

58-
const className = "tb-frame-soft flex min-h-[190px] flex-col justify-between p-5";
58+
const className = "tb-frame-soft flex h-full min-h-[206px] flex-col justify-between p-5";
5959

6060
if (external) {
6161
return (

‎src/components/site-footer.tsx‎

Lines changed: 33 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { getIndex } from "@/lib/task-index";
2+
import { TaskBeaconLogo, TaskBeaconMark } from "@/components/taskbeacon-logo";
23

34
export function SiteFooter() {
45
const index = getIndex();
@@ -9,20 +10,40 @@ export function SiteFooter() {
910
<footer className="mt-16 bg-[#efe7de]">
1011
<div className="mx-auto w-full max-w-7xl px-4 py-12 sm:px-6 lg:px-8">
1112
<div className="tb-frame bg-[#fff8f0] px-6 py-8">
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>
13+
<div className="grid gap-8 lg:grid-cols-[minmax(0,1fr)_280px] lg:items-center">
14+
<div>
15+
<TaskBeaconLogo markClassName="size-11" textClassName="text-3xl" />
16+
<div className="mt-4 max-w-2xl text-sm leading-7 text-slate-700">
17+
Canonical tasks, aligned previews, framework references, and reusable guidance for
18+
auditable cognitive task development.
19+
</div>
1720

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>
22-
</div>
21+
<div className="mt-6 flex flex-wrap gap-6 text-sm text-slate-700">
22+
<div>{tasks.length} canonical tasks</div>
23+
<div>{previewCount} web previews</div>
24+
<div>Index updated {new Date(index.generated_at).toLocaleDateString("en-US")}</div>
25+
</div>
26+
27+
<div className="mt-5 text-xs text-slate-600">
28+
TaskBeacon GitHub organization remains the public source of truth for active repositories.
29+
</div>
30+
</div>
2331

24-
<div className="mt-6 text-xs text-slate-600">
25-
TaskBeacon GitHub organization remains the public source of truth for active repositories.
32+
<div className="lg:justify-self-end">
33+
<div className="tb-frame-soft flex items-center justify-center bg-[#eef8ff] px-6 py-8">
34+
<div className="flex items-center gap-4">
35+
<TaskBeaconMark className="size-20" />
36+
<div>
37+
<div className="font-heading text-[2.2rem] leading-none text-[#25314d]">
38+
TaskBeacon
39+
</div>
40+
<div className="mt-2 text-sm font-bold uppercase tracking-[0.16em] text-slate-500">
41+
Canonical Task Hub
42+
</div>
43+
</div>
44+
</div>
45+
</div>
46+
</div>
2647
</div>
2748
</div>
2849
</div>

0 commit comments

Comments
 (0)