Skip to content

Commit 0ba1081

Browse files
mrepol742mrepol742
committed
chore: initialize kanban and adjustments
- add kanban page with sample projects, groups, columns, and cards - implement sticky header, filters, and horizontally scrollable board - render projects and groups from new data arrays in kanban page - replace github anchor with Link in home page - refactor hero cards markup and transitions, adjust progress bars - tweak positioning and classes for card components
1 parent 202ec54 commit 0ba1081

2 files changed

Lines changed: 252 additions & 60 deletions

File tree

‎app/d/kanban/page.tsx‎

Lines changed: 199 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,205 @@
11
export default function Kanban() {
2+
const projects = ["Devpulse", "Client Portal", "Internal Tools"];
3+
4+
const groups = [
5+
{
6+
id: "status",
7+
title: "Status",
8+
description: "Workflow states",
9+
columns: [
10+
{
11+
id: "backlog",
12+
title: "Backlog",
13+
count: 6,
14+
items: [
15+
{ id: "DP-12", title: "Revamp billing page", tag: "UI" },
16+
{ id: "DP-18", title: "Audit auth edge cases", tag: "Security" },
17+
{ id: "DP-23", title: "Design audit logs", tag: "Design" },
18+
],
19+
},
20+
{
21+
id: "in-progress",
22+
title: "In Progress",
23+
count: 3,
24+
items: [
25+
{ id: "DP-31", title: "Realtime status service", tag: "Backend" },
26+
{ id: "DP-34", title: "Kanban board layout", tag: "Frontend" },
27+
],
28+
},
29+
{
30+
id: "review",
31+
title: "In Review",
32+
count: 2,
33+
items: [{ id: "DP-38", title: "OAuth callback flow", tag: "Auth" }],
34+
},
35+
{
36+
id: "done",
37+
title: "Done",
38+
count: 8,
39+
items: [{ id: "DP-05", title: "Setup rate limiter", tag: "Infra" }],
40+
},
41+
],
42+
},
43+
{
44+
id: "type",
45+
title: "Type",
46+
description: "Track by issue type",
47+
columns: [
48+
{
49+
id: "bug",
50+
title: "Bug",
51+
count: 4,
52+
items: [{ id: "DP-14", title: "Email confirm loop", tag: "Auth" }],
53+
},
54+
{
55+
id: "feature",
56+
title: "Feature",
57+
count: 7,
58+
items: [{ id: "DP-22", title: "Team invite flow", tag: "Growth" }],
59+
},
60+
{
61+
id: "chore",
62+
title: "Chore",
63+
count: 5,
64+
items: [{ id: "DP-29", title: "Upgrade UI kit", tag: "UI" }],
65+
},
66+
],
67+
},
68+
{
69+
id: "priority",
70+
title: "Priority",
71+
description: "Delivery focus",
72+
columns: [
73+
{
74+
id: "p0",
75+
title: "P0",
76+
count: 1,
77+
items: [
78+
{ id: "DP-41", title: "Service outage recovery", tag: "Ops" },
79+
],
80+
},
81+
{
82+
id: "p1",
83+
title: "P1",
84+
count: 3,
85+
items: [{ id: "DP-27", title: "Role-based access", tag: "Security" }],
86+
},
87+
{
88+
id: "p2",
89+
title: "P2",
90+
count: 6,
91+
items: [{ id: "DP-35", title: "Improve docs", tag: "Docs" }],
92+
},
93+
],
94+
},
95+
];
96+
297
return (
3-
<div>
98+
<div className="min-h-screen bg-[#0a0a1a] text-white">
99+
{/* Top header */}
100+
<div className="sticky top-0 z-20 border-b border-white/5 bg-[#0a0a1a]/95 backdrop-blur">
101+
<div className="mx-auto max-w-[1400px] px-6 py-4">
102+
<div className="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
103+
<div>
104+
<p className="text-xs uppercase tracking-[0.2em] text-indigo-400/80">
105+
Project Kanban
106+
</p>
107+
<h1 className="text-2xl font-semibold">Boards</h1>
108+
</div>
109+
110+
<div className="flex flex-wrap items-center gap-3">
111+
<select className="h-10 rounded-lg border border-white/10 bg-white/5 px-3 text-sm text-gray-200">
112+
{projects.map((project) => (
113+
<option key={project}>{project}</option>
114+
))}
115+
</select>
116+
117+
<button className="h-10 rounded-lg border border-white/10 bg-white/5 px-4 text-sm text-gray-200 hover:bg-white/10 transition">
118+
Filter
119+
</button>
120+
<button className="h-10 rounded-lg border border-indigo-500/30 bg-indigo-500/10 px-4 text-sm text-indigo-300 hover:bg-indigo-500/20 transition">
121+
+ New Issue
122+
</button>
123+
</div>
124+
</div>
125+
126+
<div className="mt-4 flex flex-wrap items-center gap-2 text-xs text-gray-400">
127+
<span className="rounded-full border border-white/10 px-3 py-1 bg-white/5">
128+
View: Kanban
129+
</span>
130+
<span className="rounded-full border border-white/10 px-3 py-1 bg-white/5">
131+
Group: Status
132+
</span>
133+
<span className="rounded-full border border-white/10 px-3 py-1 bg-white/5">
134+
Sort: Priority
135+
</span>
136+
</div>
137+
</div>
138+
</div>
139+
140+
{/* Kanban viewport */}
141+
<div className="mx-auto max-w-[1400px] px-6 pb-8">
142+
<div className="h-[calc(100vh-190px)] overflow-x-auto overflow-y-hidden">
143+
<div className="flex w-max gap-10 pr-10">
144+
{groups.map((group) => (
145+
<section key={group.id} className="min-w-[740px]">
146+
<div className="flex items-end justify-between">
147+
<div>
148+
<h2 className="text-sm font-semibold text-gray-100">
149+
{group.title}
150+
</h2>
151+
<p className="text-xs text-gray-500">{group.description}</p>
152+
</div>
153+
<button className="text-xs text-indigo-300 hover:text-indigo-200">
154+
+ Add column
155+
</button>
156+
</div>
157+
158+
<div className="mt-4 flex gap-4">
159+
{group.columns.map((col) => (
160+
<div
161+
key={col.id}
162+
className="w-72 shrink-0 rounded-xl border border-white/10 bg-white/5 p-3"
163+
>
164+
<div className="flex items-center justify-between">
165+
<h3 className="text-sm font-semibold text-gray-100">
166+
{col.title}
167+
</h3>
168+
<span className="text-xs rounded-full bg-white/10 px-2 py-0.5 text-gray-300">
169+
{col.count}
170+
</span>
171+
</div>
172+
173+
<div className="mt-3 space-y-2">
174+
{col.items.map((item) => (
175+
<div
176+
key={item.id}
177+
className="rounded-lg border border-white/10 bg-[#0f0f20] p-3 hover:border-white/20 transition"
178+
>
179+
<div className="flex items-center justify-between text-xs text-gray-400">
180+
<span>{item.id}</span>
181+
<span className="rounded-full border border-white/10 px-2 py-0.5">
182+
{item.tag}
183+
</span>
184+
</div>
185+
<p className="mt-2 text-sm text-gray-200">
186+
{item.title}
187+
</p>
188+
</div>
189+
))}
4190

191+
<button className="w-full rounded-lg border border-dashed border-white/15 py-2 text-xs text-gray-400 hover:text-gray-200 hover:border-white/30 transition">
192+
+ Add card
193+
</button>
194+
</div>
195+
</div>
196+
))}
197+
</div>
198+
</section>
199+
))}
200+
</div>
201+
</div>
202+
</div>
5203
</div>
6204
);
7205
}

‎app/page.tsx‎

Lines changed: 53 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -128,7 +128,7 @@ export default async function Home() {
128128
<section className="relative max-w-7xl mx-auto px-6 pt-32 lg:pt-40 pb-20 lg:pb-32 flex flex-col lg:flex-row items-center gap-16 min-h-[85vh]">
129129
{/* Left text */}
130130
<div className="w-full lg:w-1/2 text-center lg:text-left z-10">
131-
<a
131+
<Link
132132
href="https://github.com/hallofcodes/devpulse"
133133
target="_blank"
134134
rel="noopener noreferrer"
@@ -140,7 +140,7 @@ export default async function Home() {
140140
className="w-4 h-4 text-yellow-400 group-hover:scale-110 transition-transform"
141141
/>
142142
Star on GitHub
143-
</a>
143+
</Link>
144144

145145
<h1
146146
className="text-5xl md:text-6xl lg:text-7xl font-extrabold tracking-tight leading-[1.1] text-transparent bg-clip-text bg-gradient-to-br from-white to-gray-400 mb-6"
@@ -184,80 +184,74 @@ export default async function Home() {
184184
{/* Right abstract UI visual / Mockup */}
185185
<div className="w-full lg:w-1/2 relative h-[400px] lg:h-[500px] hidden md:block z-10 perspective-1000">
186186
{/* Card 1 */}
187-
<div
188-
className="absolute top-0 right-10 lg:right-0 w-[320px] glass-card p-5 border-white/10 shadow-2xl skew-y-3 -rotate-3 transition-transform duration-700 hover:rotate-0 hover:skew-y-0"
189-
style={{ transformStyle: "preserve-3d" }}
190-
data-aos="fade-left"
191-
data-aos-delay="200"
192-
>
193-
<div className="flex items-center justify-between mb-4">
194-
<div className="text-xs text-gray-400 font-semibold uppercase tracking-wider">
195-
Total Coding
187+
<div data-aos="fade-left" data-aos-delay="200">
188+
<div
189+
className="absolute top-0 right-10 lg:right-0 w-[320px] glass-card p-5 border-white/10 shadow-2xl skew-y-3 -rotate-3 transition-all duration-700 hover:rotate-0 hover:skew-y-0"
190+
style={{ transformStyle: "preserve-3d" }}
191+
>
192+
<div className="flex items-center justify-between mb-4">
193+
<div className="text-xs text-gray-400 font-semibold uppercase tracking-wider">
194+
Total Coding
195+
</div>
196+
<div className="text-xs text-emerald-400 bg-emerald-500/10 px-2 py-0.5 rounded-full font-bold">
197+
+18%
198+
</div>
196199
</div>
197-
<div className="text-xs text-emerald-400 bg-emerald-500/10 px-2 py-0.5 rounded-full font-bold">
198-
+18%
200+
<div className="text-4xl font-extrabold text-white mb-2">
201+
42h 15m
202+
</div>
203+
<div className="text-xs text-gray-500 mb-4">Last 7 days</div>
204+
<div className="h-1.5 w-full bg-white/5 rounded-full overflow-hidden">
205+
<div className="h-full bg-gradient-to-r from-indigo-500 to-purple-500 w-3/4 rounded-full" />
199206
</div>
200-
</div>
201-
<div className="text-4xl font-extrabold text-white mb-2">
202-
42h 15m
203-
</div>
204-
<div className="text-xs text-gray-500 mb-4">Last 7 days</div>
205-
<div className="h-1.5 w-full bg-white/5 rounded-full overflow-hidden">
206-
<div className="h-full bg-gradient-to-r from-indigo-500 to-purple-500 w-3/4 rounded-full" />
207207
</div>
208208
</div>
209209

210210
{/* Card 2 */}
211-
<div
212-
className="absolute top-44 left-10 lg:-left-10 w-[280px] glass-card p-5 border-white/10 shadow-2xl -skew-y-3 rotate-3 z-20 backdrop-blur-xl bg-[#0f0f28]/80 transition-transform duration-700 hover:rotate-0 hover:skew-y-0 text-left"
213-
data-aos="fade-up"
214-
data-aos-delay="400"
215-
>
216-
<h4 className="text-xs text-gray-400 font-semibold uppercase tracking-wider mb-4">
217-
Top Languages
218-
</h4>
219-
<div className="space-y-4">
220-
<div className="flex items-center gap-3">
221-
<div className="w-8 h-8 rounded-md bg-[#3178c6]/20 flex items-center justify-center text-[#3178c6] font-bold text-xs">
222-
TS
223-
</div>
224-
<div className="flex-1">
225-
<div className="flex justify-between text-sm mb-1">
226-
<span className="font-bold text-white">TypeScript</span>
227-
<span className="text-gray-400 font-mono text-xs">
228-
28h 40m
229-
</span>
211+
<div data-aos="fade-up" data-aos-delay="400">
212+
<div className="absolute top-44 left-10 lg:-left-10 w-[280px] glass-card p-5 border-white/10 shadow-2xl -skew-y-3 rotate-3 z-20 backdrop-blur-xl bg-[#0f0f28]/80 transition-all duration-700 hover:rotate-0 hover:skew-y-0 text-left">
213+
<h4 className="text-xs text-gray-400 font-semibold uppercase tracking-wider mb-4">
214+
Top Languages
215+
</h4>
216+
<div className="space-y-4">
217+
<div className="flex items-center gap-3">
218+
<div className="w-8 h-8 rounded-md bg-[#3178c6]/20 flex items-center justify-center text-[#3178c6] font-bold text-xs">
219+
TS
230220
</div>
231-
<div className="h-1 w-full bg-white/5 rounded-full overflow-hidden">
232-
<div className="h-full bg-[#3178c6] w-[70%]" />
221+
<div className="flex-1">
222+
<div className="flex justify-between text-sm mb-1">
223+
<span className="font-bold text-white">TypeScript</span>
224+
<span className="text-gray-400 font-mono text-xs">
225+
28h 40m
226+
</span>
227+
</div>
228+
<div className="h-1 w-full bg-white/5 rounded-full overflow-hidden">
229+
<div className="h-full bg-[#3178c6] w-[70%]" />
230+
</div>
233231
</div>
234232
</div>
235-
</div>
236-
<div className="flex items-center gap-3">
237-
<div className="w-8 h-8 rounded-md bg-[#61dafb]/20 flex items-center justify-center text-[#61dafb] font-bold text-xs">
238-
Re
239-
</div>
240-
<div className="flex-1">
241-
<div className="flex justify-between text-sm mb-1">
242-
<span className="font-bold text-white">React</span>
243-
<span className="text-gray-400 font-mono text-xs">
244-
12h 10m
245-
</span>
233+
<div className="flex items-center gap-3">
234+
<div className="w-8 h-8 rounded-md bg-[#61dafb]/20 flex items-center justify-center text-[#61dafb] font-bold text-xs">
235+
Re
246236
</div>
247-
<div className="h-1 w-full bg-white/5 rounded-full overflow-hidden">
248-
<div className="h-full bg-[#61dafb] w-[30%]" />
237+
<div className="flex-1">
238+
<div className="flex justify-between text-sm mb-1">
239+
<span className="font-bold text-white">React</span>
240+
<span className="text-gray-400 font-mono text-xs">
241+
12h 10m
242+
</span>
243+
</div>
244+
<div className="h-1 w-full bg-white/5 rounded-full overflow-hidden">
245+
<div className="h-full bg-[#61dafb] w-[30%]" />
246+
</div>
249247
</div>
250248
</div>
251249
</div>
252250
</div>
253251
</div>
254252

255253
{/* Card 3 (Code terminal) */}
256-
<div
257-
className="absolute bottom-5 right-20 w-[300px] glass-card p-4 border border-white/10 shadow-[0_20px_50px_rgba(0,0,0,0.5)] z-30 bg-[#050510]/90 transition-transform duration-700 hover:-translate-y-2 text-left"
258-
data-aos="fade-up"
259-
data-aos-delay="600"
260-
>
254+
<div className="absolute bottom-5 right-20 w-[300px] glass-card p-4 border border-white/10 shadow-[0_20px_50px_rgba(0,0,0,0.5)] z-30 bg-[#050510]/90 transition-transform duration-700 hover:-translate-y-2 text-left">
261255
<div className="flex gap-1.5 mb-3">
262256
<div className="w-2.5 h-2.5 rounded-full bg-red-500/80" />
263257
<div className="w-2.5 h-2.5 rounded-full bg-yellow-500/80" />

0 commit comments

Comments
 (0)