Skip to content

Commit d6be8f5

Browse files
izadoesdevizadoesdev
committed
initial roadmap
1 parent 0ee82c0 commit d6be8f5

File tree

7 files changed

+1660
-0
lines changed

7 files changed

+1660
-0
lines changed

‎apps/docs/app/(home)/roadmap/page.tsx‎

Lines changed: 262 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,262 @@
1+
import type { Metadata } from 'next';
2+
import { Footer } from '@/components/footer';
3+
import Section from '@/components/landing/section';
4+
import { Spotlight } from '@/components/landing/spotlight';
5+
import { calculateRoadmapStats, roadmapItems } from './roadmap-data';
6+
import RoadmapHero from './roadmap-hero';
7+
import RoadmapStatsComponent from './roadmap-stats';
8+
import RoadmapTimeline from './roadmap-timeline';
9+
10+
export const metadata: Metadata = {
11+
title: 'Roadmap | Databuddy',
12+
description:
13+
"Discover what we're building next. Our transparent roadmap shows upcoming features, current progress, and completed milestones.",
14+
};
15+
16+
export default function RoadmapPage() {
17+
const stats = calculateRoadmapStats();
18+
19+
return (
20+
<div className="overflow-hidden">
21+
<Spotlight transform="translateX(-60%) translateY(-50%)" />
22+
23+
{/* Hero Section */}
24+
<Section className="overflow-hidden" customPaddings id="roadmap-hero">
25+
<RoadmapHero stats={stats} />
26+
</Section>
27+
28+
{/* Stats Section */}
29+
<Section
30+
className="border-border border-t border-b bg-background/50"
31+
id="roadmap-stats"
32+
>
33+
<div className="mx-auto w-full max-w-7xl px-4 sm:px-6 lg:px-8">
34+
<div className="mb-8">
35+
<h2 className="mb-2 font-semibold text-2xl sm:text-3xl lg:text-4xl">
36+
Progress Overview
37+
</h2>
38+
<p className="text-muted-foreground text-sm sm:text-base lg:text-lg">
39+
Detailed breakdown of our development progress across categories
40+
and priorities
41+
</p>
42+
</div>
43+
<RoadmapStatsComponent items={roadmapItems} stats={stats} />
44+
</div>
45+
</Section>
46+
47+
{/* Timeline Section */}
48+
<Section
49+
className="border-border border-b bg-background/30"
50+
id="roadmap-timeline"
51+
>
52+
<div className="mx-auto w-full max-w-7xl px-4 sm:px-6 lg:px-8">
53+
<div className="mb-8">
54+
<h2 className="mb-2 font-semibold text-2xl sm:text-3xl lg:text-4xl">
55+
Development Timeline
56+
</h2>
57+
<p className="text-muted-foreground text-sm sm:text-base lg:text-lg">
58+
Complete timeline of features, from completed milestones to future
59+
plans
60+
</p>
61+
</div>
62+
<RoadmapTimeline items={roadmapItems} />
63+
</div>
64+
</Section>
65+
66+
{/* Community Section */}
67+
<Section className="bg-background/50" id="roadmap-community">
68+
<div className="mx-auto w-full max-w-4xl px-4 text-center sm:px-6 lg:px-8">
69+
<h2 className="mb-6 font-semibold text-2xl sm:text-3xl lg:text-4xl">
70+
Shape Our Future
71+
</h2>
72+
<p className="mx-auto mb-8 max-w-2xl text-muted-foreground text-sm sm:text-base lg:text-lg">
73+
Our roadmap is a living document that evolves based on user
74+
feedback, market needs, and technical discoveries. Your input helps
75+
us prioritize what matters most.
76+
</p>
77+
78+
{/* Community Stats */}
79+
<div className="mb-8 grid grid-cols-1 gap-6 sm:grid-cols-3">
80+
<div className="group relative rounded border border-border bg-card/50 p-6 backdrop-blur-sm transition-all duration-300 hover:border-border/80 hover:bg-card/70">
81+
<div className="font-bold text-2xl">500+</div>
82+
<div className="text-muted-foreground text-sm">
83+
Community Members
84+
</div>
85+
86+
{/* Sci-fi corners */}
87+
<div className="pointer-events-none absolute inset-0">
88+
<div className="absolute top-0 left-0 h-2 w-2 group-hover:animate-[cornerGlitch_0.6s_ease-in-out]">
89+
<div className="absolute top-0 left-0.5 h-0.5 w-1.5 origin-left bg-foreground" />
90+
<div className="absolute top-0 left-0 h-2 w-0.5 origin-top bg-foreground" />
91+
</div>
92+
<div className="-scale-x-[1] absolute top-0 right-0 h-2 w-2 group-hover:animate-[cornerGlitch_0.6s_ease-in-out]">
93+
<div className="absolute top-0 left-0.5 h-0.5 w-1.5 origin-left bg-foreground" />
94+
<div className="absolute top-0 left-0 h-2 w-0.5 origin-top bg-foreground" />
95+
</div>
96+
<div className="-scale-y-[1] absolute bottom-0 left-0 h-2 w-2 group-hover:animate-[cornerGlitch_0.6s_ease-in-out]">
97+
<div className="absolute top-0 left-0.5 h-0.5 w-1.5 origin-left bg-foreground" />
98+
<div className="absolute top-0 left-0 h-2 w-0.5 origin-top bg-foreground" />
99+
</div>
100+
<div className="-scale-[1] absolute right-0 bottom-0 h-2 w-2 group-hover:animate-[cornerGlitch_0.6s_ease-in-out]">
101+
<div className="absolute top-0 left-0.5 h-0.5 w-1.5 origin-left bg-foreground" />
102+
<div className="absolute top-0 left-0 h-2 w-0.5 origin-top bg-foreground" />
103+
</div>
104+
</div>
105+
</div>
106+
107+
<div className="group relative rounded border border-border bg-card/50 p-6 backdrop-blur-sm transition-all duration-300 hover:border-border/80 hover:bg-card/70">
108+
<div className="font-bold text-2xl">150+</div>
109+
<div className="text-muted-foreground text-sm">
110+
Feature Requests
111+
</div>
112+
113+
{/* Sci-fi corners */}
114+
<div className="pointer-events-none absolute inset-0">
115+
<div className="absolute top-0 left-0 h-2 w-2 group-hover:animate-[cornerGlitch_0.6s_ease-in-out]">
116+
<div className="absolute top-0 left-0.5 h-0.5 w-1.5 origin-left bg-foreground" />
117+
<div className="absolute top-0 left-0 h-2 w-0.5 origin-top bg-foreground" />
118+
</div>
119+
<div className="-scale-x-[1] absolute top-0 right-0 h-2 w-2 group-hover:animate-[cornerGlitch_0.6s_ease-in-out]">
120+
<div className="absolute top-0 left-0.5 h-0.5 w-1.5 origin-left bg-foreground" />
121+
<div className="absolute top-0 left-0 h-2 w-0.5 origin-top bg-foreground" />
122+
</div>
123+
<div className="-scale-y-[1] absolute bottom-0 left-0 h-2 w-2 group-hover:animate-[cornerGlitch_0.6s_ease-in-out]">
124+
<div className="absolute top-0 left-0.5 h-0.5 w-1.5 origin-left bg-foreground" />
125+
<div className="absolute top-0 left-0 h-2 w-0.5 origin-top bg-foreground" />
126+
</div>
127+
<div className="-scale-[1] absolute right-0 bottom-0 h-2 w-2 group-hover:animate-[cornerGlitch_0.6s_ease-in-out]">
128+
<div className="absolute top-0 left-0.5 h-0.5 w-1.5 origin-left bg-foreground" />
129+
<div className="absolute top-0 left-0 h-2 w-0.5 origin-top bg-foreground" />
130+
</div>
131+
</div>
132+
</div>
133+
134+
<div className="group relative rounded border border-border bg-card/50 p-6 backdrop-blur-sm transition-all duration-300 hover:border-border/80 hover:bg-card/70">
135+
<div className="font-bold text-2xl">95%</div>
136+
<div className="text-muted-foreground text-sm">
137+
User Satisfaction
138+
</div>
139+
140+
{/* Sci-fi corners */}
141+
<div className="pointer-events-none absolute inset-0">
142+
<div className="absolute top-0 left-0 h-2 w-2 group-hover:animate-[cornerGlitch_0.6s_ease-in-out]">
143+
<div className="absolute top-0 left-0.5 h-0.5 w-1.5 origin-left bg-foreground" />
144+
<div className="absolute top-0 left-0 h-2 w-0.5 origin-top bg-foreground" />
145+
</div>
146+
<div className="-scale-x-[1] absolute top-0 right-0 h-2 w-2 group-hover:animate-[cornerGlitch_0.6s_ease-in-out]">
147+
<div className="absolute top-0 left-0.5 h-0.5 w-1.5 origin-left bg-foreground" />
148+
<div className="absolute top-0 left-0 h-2 w-0.5 origin-top bg-foreground" />
149+
</div>
150+
<div className="-scale-y-[1] absolute bottom-0 left-0 h-2 w-2 group-hover:animate-[cornerGlitch_0.6s_ease-in-out]">
151+
<div className="absolute top-0 left-0.5 h-0.5 w-1.5 origin-left bg-foreground" />
152+
<div className="absolute top-0 left-0 h-2 w-0.5 origin-top bg-foreground" />
153+
</div>
154+
<div className="-scale-[1] absolute right-0 bottom-0 h-2 w-2 group-hover:animate-[cornerGlitch_0.6s_ease-in-out]">
155+
<div className="absolute top-0 left-0.5 h-0.5 w-1.5 origin-left bg-foreground" />
156+
<div className="absolute top-0 left-0 h-2 w-0.5 origin-top bg-foreground" />
157+
</div>
158+
</div>
159+
</div>
160+
</div>
161+
162+
<div className="flex flex-col gap-4 sm:flex-row sm:justify-center">
163+
<a
164+
className="inline-flex items-center justify-center rounded bg-primary px-8 py-3 font-medium text-primary-foreground transition-colors hover:bg-primary/90"
165+
href="https://github.com/databuddy-analytics/Databuddy/discussions"
166+
rel="noopener"
167+
target="_blank"
168+
>
169+
Join Discussion
170+
</a>
171+
<a
172+
className="inline-flex items-center justify-center rounded border border-border bg-background px-8 py-3 font-medium transition-colors hover:bg-accent hover:text-accent-foreground"
173+
href="https://github.com/databuddy-analytics/Databuddy/issues/new?template=feature_request.md"
174+
rel="noopener"
175+
target="_blank"
176+
>
177+
Request Feature
178+
</a>
179+
<a
180+
className="inline-flex items-center justify-center rounded border border-border bg-background px-8 py-3 font-medium transition-colors hover:bg-accent hover:text-accent-foreground"
181+
href="https://discord.gg/JTk7a38tCZ"
182+
rel="noopener"
183+
target="_blank"
184+
>
185+
Join Discord
186+
</a>
187+
</div>
188+
</div>
189+
</Section>
190+
191+
{/* Transparency Note */}
192+
<Section
193+
className="border-border border-b bg-background/30"
194+
id="roadmap-transparency"
195+
>
196+
<div className="mx-auto w-full max-w-4xl px-4 sm:px-6 lg:px-8">
197+
<div className="group relative rounded border border-border bg-card/50 p-8 backdrop-blur-sm">
198+
<h3 className="mb-4 font-semibold text-foreground text-lg">
199+
Our Commitment to Transparency
200+
</h3>
201+
<div className="space-y-4 text-muted-foreground text-sm leading-relaxed">
202+
<p>
203+
This roadmap represents our current plans and priorities, but
204+
software development is inherently unpredictable. Dates are
205+
estimates and may change based on technical challenges, user
206+
feedback, or market conditions.
207+
</p>
208+
<p>
209+
We believe in building in the open and keeping our community
210+
informed. All major decisions, delays, and pivots will be
211+
communicated transparently through our GitHub discussions,
212+
Discord community, and blog updates.
213+
</p>
214+
<p>
215+
<strong>Last updated:</strong>{' '}
216+
{new Date().toLocaleDateString('en-US', {
217+
year: 'numeric',
218+
month: 'long',
219+
day: 'numeric',
220+
})}{' '}
221+
• <strong>Next review:</strong> End of current quarter
222+
</p>
223+
</div>
224+
225+
{/* Sci-fi corners */}
226+
<div className="pointer-events-none absolute inset-0">
227+
<div className="absolute top-0 left-0 h-2 w-2 group-hover:animate-[cornerGlitch_0.6s_ease-in-out]">
228+
<div className="absolute top-0 left-0.5 h-0.5 w-1.5 origin-left bg-foreground" />
229+
<div className="absolute top-0 left-0 h-2 w-0.5 origin-top bg-foreground" />
230+
</div>
231+
<div className="-scale-x-[1] absolute top-0 right-0 h-2 w-2 group-hover:animate-[cornerGlitch_0.6s_ease-in-out]">
232+
<div className="absolute top-0 left-0.5 h-0.5 w-1.5 origin-left bg-foreground" />
233+
<div className="absolute top-0 left-0 h-2 w-0.5 origin-top bg-foreground" />
234+
</div>
235+
<div className="-scale-y-[1] absolute bottom-0 left-0 h-2 w-2 group-hover:animate-[cornerGlitch_0.6s_ease-in-out]">
236+
<div className="absolute top-0 left-0.5 h-0.5 w-1.5 origin-left bg-foreground" />
237+
<div className="absolute top-0 left-0 h-2 w-0.5 origin-top bg-foreground" />
238+
</div>
239+
<div className="-scale-[1] absolute right-0 bottom-0 h-2 w-2 group-hover:animate-[cornerGlitch_0.6s_ease-in-out]">
240+
<div className="absolute top-0 left-0.5 h-0.5 w-1.5 origin-left bg-foreground" />
241+
<div className="absolute top-0 left-0 h-2 w-0.5 origin-top bg-foreground" />
242+
</div>
243+
</div>
244+
</div>
245+
</div>
246+
</Section>
247+
248+
{/* Gradient Divider */}
249+
<div className="w-full">
250+
<div className="mx-auto h-px max-w-6xl bg-gradient-to-r from-transparent via-border/30 to-transparent" />
251+
</div>
252+
253+
{/* Footer Section */}
254+
<Footer />
255+
256+
{/* Final Gradient Divider */}
257+
<div className="w-full">
258+
<div className="mx-auto h-px max-w-6xl bg-gradient-to-r from-transparent via-border/30 to-transparent" />
259+
</div>
260+
</div>
261+
);
262+
}

0 commit comments

Comments
 (0)