Skip to content

Commit 9429b36

Browse files
nirukk52nirukk52
committed
feat(frontend): add dev journey and components pages
1 parent 0e904b1 commit 9429b36

File tree

8 files changed

+1631
-116
lines changed

8 files changed

+1631
-116
lines changed

‎frontend/src/lib/components/ModernJourneyContent.svelte‎

Lines changed: 436 additions & 0 deletions
Large diffs are not rendered by default.

‎frontend/src/lib/components/ModernJourneyFull.svelte‎

Lines changed: 688 additions & 0 deletions
Large diffs are not rendered by default.

‎frontend/src/lib/components/TabSection.svelte‎

Lines changed: 310 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,310 @@
1+
<!--
2+
@component
3+
TabSection: A tabbed navigation component with retro-modern styling.
4+
Displays Modern Journey and Components tabs with styled content panels.
5+
6+
Usage:
7+
```svelte
8+
<TabSection />
9+
```
10+
-->
11+
<script lang="ts">
12+
import { Activity, GitCompare, FileText, Package } from 'lucide-svelte';
13+
import { RetroButton, RetroCard, RetroInput, RetroBadge } from '$lib/components';
14+
15+
/** Currently active tab: 'journey' or 'components' */
16+
let activeTab = $state<'journey' | 'components'>('journey');
17+
18+
/** Handle tab button click */
19+
function setActiveTab(tab: 'journey' | 'components') {
20+
activeTab = tab;
21+
}
22+
</script>
23+
24+
<section class="py-16 px-8 bg-white">
25+
<div class="max-w-6xl mx-auto">
26+
<!-- Tab Navigation -->
27+
<div class="mb-12">
28+
<div class="flex gap-4 border-b-2 border-[var(--color-charcoal)]">
29+
<button
30+
onclick={() => setActiveTab('journey')}
31+
class="px-8 py-4 text-lg font-medium transition-all rounded-t-xl {activeTab === 'journey' ? 'bg-[var(--color-sky-blue)] retro-shadow-sm -mb-0.5' : 'hover:bg-[var(--color-neutral-gray)]'}"
32+
>
33+
<span class="flex items-center gap-2 text-[var(--color-charcoal)]">
34+
<GitCompare class="w-5 h-5" />
35+
Modern Journey
36+
</span>
37+
</button>
38+
<button
39+
onclick={() => setActiveTab('components')}
40+
class="px-8 py-4 text-lg font-medium transition-all rounded-t-xl {activeTab === 'components' ? 'bg-[var(--color-warm-tan)] retro-shadow-sm -mb-0.5' : 'hover:bg-[var(--color-neutral-gray)]'}"
41+
>
42+
<span class="flex items-center gap-2 text-[var(--color-charcoal)]">
43+
<Package class="w-5 h-5" />
44+
Components
45+
</span>
46+
</button>
47+
</div>
48+
</div>
49+
50+
<!-- Tab Panels -->
51+
<div class="min-h-[500px]">
52+
{#if activeTab === 'journey'}
53+
<!-- Modern Journey Content -->
54+
<div class="space-y-12">
55+
<div class="text-center space-y-4">
56+
<h2 class="text-4xl text-[var(--color-charcoal)] font-medium">
57+
Your Path to Drift-Free UX
58+
</h2>
59+
<p class="text-lg text-[var(--color-text-secondary)] max-w-2xl mx-auto">
60+
Follow our streamlined workflow to catch every visual regression before your users do.
61+
</p>
62+
</div>
63+
64+
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
65+
<!-- Step 1: Upload -->
66+
<RetroCard variant="sky">
67+
<div class="space-y-4">
68+
<div
69+
class="w-12 h-12 bg-white rounded-xl retro-shadow-sm flex items-center justify-center"
70+
>
71+
<Activity class="w-6 h-6 text-[var(--color-charcoal)]" />
72+
</div>
73+
<div class="space-y-2">
74+
<h3 class="text-xl text-[var(--color-charcoal)] font-medium">Upload Build</h3>
75+
<p class="text-[var(--color-text-secondary)]">
76+
Drop your APK or IPA file. ScreenGraph starts analyzing immediately.
77+
</p>
78+
</div>
79+
<div class="pt-2">
80+
<RetroBadge variant="sky">2 minutes setup</RetroBadge>
81+
</div>
82+
</div>
83+
</RetroCard>
84+
85+
<!-- Step 2: Explore -->
86+
<RetroCard variant="tan">
87+
<div class="space-y-4">
88+
<div
89+
class="w-12 h-12 bg-white rounded-xl retro-shadow-sm flex items-center justify-center"
90+
>
91+
<GitCompare class="w-6 h-6 text-[var(--color-charcoal)]" />
92+
</div>
93+
<div class="space-y-2">
94+
<h3 class="text-xl text-[var(--color-charcoal)] font-medium">Explore Graph</h3>
95+
<p class="text-[var(--color-text-secondary)]">
96+
Navigate your app's screen graph. See every path, every screen, every transition.
97+
</p>
98+
</div>
99+
<div class="pt-2">
100+
<RetroBadge variant="tan">Interactive visualization</RetroBadge>
101+
</div>
102+
</div>
103+
</RetroCard>
104+
105+
<!-- Step 3: Compare -->
106+
<RetroCard variant="pink">
107+
<div class="space-y-4">
108+
<div
109+
class="w-12 h-12 bg-white rounded-xl retro-shadow-sm flex items-center justify-center"
110+
>
111+
<FileText class="w-6 h-6 text-[var(--color-charcoal)]" />
112+
</div>
113+
<div class="space-y-2">
114+
<h3 class="text-xl text-[var(--color-charcoal)] font-medium">Review Drifts</h3>
115+
<p class="text-[var(--color-text-secondary)]">
116+
Get instant diff reports. See exactly what changed between builds.
117+
</p>
118+
</div>
119+
<div class="pt-2">
120+
<RetroBadge variant="pink">Automated reports</RetroBadge>
121+
</div>
122+
</div>
123+
</RetroCard>
124+
</div>
125+
126+
<!-- Integration Options -->
127+
<div class="retro-shadow rounded-3xl p-8 bg-[var(--color-neutral-gray)]">
128+
<h3 class="text-2xl text-[var(--color-charcoal)] font-medium mb-6">
129+
Integrate Anywhere
130+
</h3>
131+
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
132+
<div class="space-y-2">
133+
<div class="text-lg font-medium text-[var(--color-charcoal)]">CI/CD Pipeline</div>
134+
<p class="text-sm text-[var(--color-text-secondary)]">
135+
GitHub Actions, GitLab CI, Jenkins - plug in and go.
136+
</p>
137+
</div>
138+
<div class="space-y-2">
139+
<div class="text-lg font-medium text-[var(--color-charcoal)]">Slack Alerts</div>
140+
<p class="text-sm text-[var(--color-text-secondary)]">
141+
Get drift notifications directly in your team channel.
142+
</p>
143+
</div>
144+
<div class="space-y-2">
145+
<div class="text-lg font-medium text-[var(--color-charcoal)]">REST API</div>
146+
<p class="text-sm text-[var(--color-text-secondary)]">
147+
Full programmatic access for custom workflows.
148+
</p>
149+
</div>
150+
</div>
151+
</div>
152+
</div>
153+
{:else if activeTab === 'components'}
154+
<!-- Components Tab Content -->
155+
<div class="space-y-12">
156+
<div class="text-center space-y-4">
157+
<h2 class="text-4xl text-[var(--color-charcoal)] font-medium">
158+
Retro-Modern Design System
159+
</h2>
160+
<p class="text-lg text-[var(--color-text-secondary)] max-w-2xl mx-auto">
161+
Built with bold shadows, vibrant pastels, and brutalist aesthetics for a unique visual
162+
identity.
163+
</p>
164+
</div>
165+
166+
<!-- Color Palette -->
167+
<div class="space-y-6">
168+
<h3 class="text-2xl text-[var(--color-charcoal)] font-medium">Color Palette</h3>
169+
<div class="grid grid-cols-2 md:grid-cols-4 gap-4">
170+
<div class="retro-shadow rounded-2xl p-6 bg-[var(--color-sky-blue)]">
171+
<div class="text-sm font-medium text-[var(--color-charcoal)] mb-2">Sky Blue</div>
172+
<div class="text-xs text-[var(--color-text-secondary)]">#B4D4E1</div>
173+
</div>
174+
<div class="retro-shadow rounded-2xl p-6 bg-[var(--color-warm-tan)]">
175+
<div class="text-sm font-medium text-[var(--color-charcoal)] mb-2">Warm Tan</div>
176+
<div class="text-xs text-[var(--color-text-secondary)]">#D9B89C</div>
177+
</div>
178+
<div class="retro-shadow rounded-2xl p-6 bg-[var(--color-soft-pink)]">
179+
<div class="text-sm font-medium text-[var(--color-charcoal)] mb-2">Soft Pink</div>
180+
<div class="text-xs text-[var(--color-text-secondary)]">#E5C9C9</div>
181+
</div>
182+
<div class="retro-shadow rounded-2xl p-6 bg-[var(--color-charcoal)]">
183+
<div class="text-sm font-medium text-white mb-2">Charcoal</div>
184+
<div class="text-xs text-gray-300">#2D2D2D</div>
185+
</div>
186+
</div>
187+
</div>
188+
189+
<!-- Buttons -->
190+
<div class="space-y-6">
191+
<h3 class="text-2xl text-[var(--color-charcoal)] font-medium">Buttons</h3>
192+
<div class="flex flex-wrap gap-4">
193+
<RetroButton variant="primary">Primary Action</RetroButton>
194+
<RetroButton variant="secondary">Secondary Action</RetroButton>
195+
<RetroButton variant="accent">Accent Action</RetroButton>
196+
<RetroButton variant="success">Success Action</RetroButton>
197+
</div>
198+
<div class="flex flex-wrap gap-4">
199+
<RetroButton variant="primary" size="sm">Small</RetroButton>
200+
<RetroButton variant="primary" size="md">Medium</RetroButton>
201+
<RetroButton variant="primary" size="lg">Large</RetroButton>
202+
</div>
203+
</div>
204+
205+
<!-- Cards -->
206+
<div class="space-y-6">
207+
<h3 class="text-2xl text-[var(--color-charcoal)] font-medium">Cards</h3>
208+
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
209+
<RetroCard
210+
variant="sky"
211+
title="Sky Card"
212+
description="Perfect for informational content and secondary features."
213+
/>
214+
<RetroCard
215+
variant="tan"
216+
title="Tan Card"
217+
description="Great for highlighting important sections and calls-to-action."
218+
/>
219+
<RetroCard
220+
variant="pink"
221+
title="Pink Card"
222+
description="Ideal for testimonials, feedback, and success messages."
223+
/>
224+
</div>
225+
</div>
226+
227+
<!-- Badges -->
228+
<div class="space-y-6">
229+
<h3 class="text-2xl text-[var(--color-charcoal)] font-medium">Badges</h3>
230+
<div class="flex flex-wrap gap-4">
231+
<RetroBadge variant="sky">Product Analytics</RetroBadge>
232+
<RetroBadge variant="tan">Beta Access</RetroBadge>
233+
<RetroBadge variant="pink">New Feature</RetroBadge>
234+
<RetroBadge variant="white">Default</RetroBadge>
235+
</div>
236+
</div>
237+
238+
<!-- Typography -->
239+
<div class="space-y-6">
240+
<h3 class="text-2xl text-[var(--color-charcoal)] font-medium">Typography</h3>
241+
<div class="space-y-4">
242+
<div>
243+
<h1 class="text-6xl text-[var(--color-charcoal)] font-medium">
244+
Heading 1 - Display
245+
</h1>
246+
<p class="text-sm text-[var(--color-text-secondary)] mt-2">
247+
Used for hero sections and primary headlines
248+
</p>
249+
</div>
250+
<div>
251+
<h2 class="text-4xl text-[var(--color-charcoal)] font-medium">
252+
Heading 2 - Section
253+
</h2>
254+
<p class="text-sm text-[var(--color-text-secondary)] mt-2">
255+
Used for section titles and major divisions
256+
</p>
257+
</div>
258+
<div>
259+
<h3 class="text-2xl text-[var(--color-charcoal)] font-medium">Heading 3 - Card</h3>
260+
<p class="text-sm text-[var(--color-text-secondary)] mt-2">
261+
Used for card titles and sub-sections
262+
</p>
263+
</div>
264+
<div>
265+
<p class="text-xl text-[var(--color-text-secondary)] leading-relaxed">
266+
Body Large - Used for introductory paragraphs and lead text. Provides comfortable
267+
reading at 20px with relaxed line height.
268+
</p>
269+
</div>
270+
<div>
271+
<p class="text-base text-[var(--color-text-secondary)]">
272+
Body Medium - Standard body text at 16px. Used for most content throughout the
273+
application.
274+
</p>
275+
</div>
276+
</div>
277+
</div>
278+
279+
<!-- Shadows & Effects -->
280+
<div class="space-y-6">
281+
<h3 class="text-2xl text-[var(--color-charcoal)] font-medium">Shadows & Effects</h3>
282+
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
283+
<div class="retro-shadow-sm rounded-2xl p-6 bg-white">
284+
<div class="text-lg font-medium text-[var(--color-charcoal)] mb-2">Small Shadow</div>
285+
<div class="text-sm text-[var(--color-text-secondary)]">
286+
4px offset, 2px border - for subtle elevation
287+
</div>
288+
</div>
289+
<div class="retro-shadow rounded-2xl p-6 bg-white">
290+
<div class="text-lg font-medium text-[var(--color-charcoal)] mb-2">
291+
Standard Shadow
292+
</div>
293+
<div class="text-sm text-[var(--color-text-secondary)]">
294+
6px offset, 2px border - for cards and panels
295+
</div>
296+
</div>
297+
<div class="retro-shadow-lg rounded-2xl p-6 bg-white">
298+
<div class="text-lg font-medium text-[var(--color-charcoal)] mb-2">Large Shadow</div>
299+
<div class="text-sm text-[var(--color-text-secondary)]">
300+
8px offset, 2px border - for modals and emphasis
301+
</div>
302+
</div>
303+
</div>
304+
</div>
305+
</div>
306+
{/if}
307+
</div>
308+
</div>
309+
</section>
310+

‎frontend/src/lib/components/index.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,4 +11,7 @@ export { default as RetroInput } from './RetroInput.svelte';
1111
export { default as RetroBadge } from './RetroBadge.svelte';
1212
export { default as ScreenGraph } from './ScreenGraph.svelte';
1313
export { default as DebugRetro } from './DebugRetro.svelte';
14+
export { default as TabSection } from './TabSection.svelte';
15+
export { default as ModernJourneyContent } from './ModernJourneyContent.svelte';
16+
export { default as ModernJourneyFull } from './ModernJourneyFull.svelte';
1417

‎frontend/src/routes/+layout.svelte‎

Lines changed: 20 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
<script lang="ts">
22
import "../app.css";
33
import { goto } from '$app/navigation';
4+
import { page } from '$app/state';
45
56
/** Root layout with Skeleton v3 for ultimate vibe coding */
67
@@ -13,15 +14,32 @@ function handleAppInfo() {
1314
function handleHome() {
1415
goto('/');
1516
}
17+
18+
/** Navigate to dev journey page */
19+
function handleDevJourney() {
20+
goto('/dev-journey');
21+
}
22+
23+
/** Navigate to components page */
24+
function handleComponents() {
25+
goto('/components');
26+
}
27+
28+
/** Check if current path matches */
29+
function isActive(path: string): boolean {
30+
return page.url.pathname === path;
31+
}
1632
</script>
1733

1834
<!-- App Header with Skeleton v3 -->
1935
<header class="bg-surface-100-900-token border-b border-surface-300-700-token">
2036
<div class="container mx-auto flex h-14 items-center px-4">
2137
<a href="/" class="text-lg font-semibold text-surface-900-50-token">ScreenGraph</a>
2238
<nav class="ml-auto flex gap-2">
23-
<button onclick={handleHome} class="btn variant-ghost-surface">Home</button>
24-
<button onclick={handleAppInfo} class="btn variant-ghost-surface">App Info</button>
39+
<button onclick={handleHome} class="btn variant-ghost-surface {isActive('/') ? 'variant-filled-primary' : ''}">Home</button>
40+
<button onclick={handleDevJourney} class="btn variant-ghost-surface {isActive('/dev-journey') ? 'variant-filled-primary' : ''}">Dev Journey</button>
41+
<button onclick={handleAppInfo} class="btn variant-ghost-surface {isActive('/app-info') ? 'variant-filled-primary' : ''}">App Info</button>
42+
<button onclick={handleComponents} class="btn variant-ghost-surface {isActive('/components') ? 'variant-filled-primary' : ''}">Components</button>
2543
</nav>
2644
</div>
2745
</header>

0 commit comments

Comments
 (0)