Skip to content

Commit f152f63

Browse files
aditya-xqaditya-xq
committed
feat: about page updates
1 parent 15679bd commit f152f63

File tree

2 files changed

+132
-184
lines changed

2 files changed

+132
-184
lines changed

‎autoproject/src/routes/about/+page.svelte‎

Lines changed: 35 additions & 184 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
1+
<script lang="ts">
2+
import { modelGuide, quickPresets } from './content.config'
3+
</script>
4+
15
<div class="container mx-auto max-w-5xl text-gray-100 px-4 py-6 space-y-8">
26
<!-- Title Section -->
37
<h1 class="text-xl md:text-2xl font-bold text-purple-400">🚀 Welcome to AutoProject</h1>
@@ -34,125 +38,28 @@
3438
<span>⚡</span>
3539
<span>Quick Settings Presets</span>
3640
</h2>
37-
3841
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
39-
<!-- Rapid POC -->
40-
<div class="bg-black p-6 rounded-xl border border-gray-800 hover:border-white transition-all duration-300">
42+
{#each quickPresets as preset}
43+
<div class="bg-black p-6 rounded-xl border border-gray-800 hover:border-white transition-all duration-300">
4144
<div class="flex items-center gap-3 mb-4">
42-
<span class="text-2xl">🚀</span>
43-
<h3 class="text-lg font-medium text-white">Rapid POC</h3>
45+
<span class="text-2xl">{preset.icon}</span>
46+
<h3 class="text-lg font-medium text-white">{preset.title}</h3>
4447
</div>
45-
<ul class="space-y-3">
46-
<li class="flex justify-between items-center">
47-
<span class="text-gray-400 text-sm">Platform</span>
48-
<span class="text-white">Groq</span>
49-
</li>
50-
<li class="flex justify-between items-center">
51-
<span class="text-gray-400 text-sm">Model</span>
52-
<span class="text-white">Llama 3.3 70b</span>
53-
</li>
54-
<li class="flex justify-between items-center">
55-
<span class="text-gray-400 text-sm">PRD Type</span>
56-
<span class="text-white">Minimal</span>
57-
</li>
58-
<li class="flex justify-between items-center">
59-
<span class="text-gray-400 text-sm">User Story</span>
60-
<span class="text-white">Minimal</span>
61-
</li>
62-
</ul>
63-
<div class="h-[1px] bg-gray-800 my-4"></div>
64-
<p class="text-sm text-gray-400">
65-
Zero to MVP in record time. Perfect for quick validation.
66-
</p>
67-
</div>
6848

69-
<!-- Enterprise Project -->
70-
<div class="bg-black p-6 rounded-xl border border-gray-800 hover:border-white transition-all duration-300">
71-
<div class="flex items-center gap-3 mb-4">
72-
<span class="text-2xl">🏢</span>
73-
<h3 class="text-lg font-medium text-white">Enterprise</h3>
74-
</div>
7549
<ul class="space-y-3">
50+
{#each preset.items as [label, value]}
7651
<li class="flex justify-between items-center">
77-
<span class="text-gray-400 text-sm">Platform</span>
78-
<span class="text-white">Gemini</span>
79-
</li>
80-
<li class="flex justify-between items-center">
81-
<span class="text-gray-400 text-sm">Model</span>
82-
<span class="text-white">Gemini 2 Flash</span>
83-
</li>
84-
<li class="flex justify-between items-center">
85-
<span class="text-gray-400 text-sm">PRD Type</span>
86-
<span class="text-white">Feature Based</span>
87-
</li>
88-
<li class="flex justify-between items-center">
89-
<span class="text-gray-400 text-sm">User Story</span>
90-
<span class="text-white">Technical</span>
52+
<span class="text-gray-400 text-sm">{label}</span>
53+
<span class="text-white">{value}</span>
9154
</li>
55+
{/each}
9256
</ul>
93-
<div class="h-[1px] bg-gray-800 my-4"></div>
94-
<p class="text-sm text-gray-400">
95-
Built for complex projects requiring technical depth.
96-
</p>
97-
</div>
9857

99-
<!-- User-Centric -->
100-
<div class="bg-black p-6 rounded-xl border border-gray-800 hover:border-white transition-all duration-300">
101-
<div class="flex items-center gap-3 mb-4">
102-
<span class="text-2xl">👥</span>
103-
<h3 class="text-lg font-medium text-white">User-Centric</h3>
104-
</div>
105-
<ul class="space-y-3">
106-
<li class="flex justify-between items-center">
107-
<span class="text-gray-400 text-sm">Platform</span>
108-
<span class="text-white">LM Studio</span>
109-
</li>
110-
<li class="flex justify-between items-center">
111-
<span class="text-gray-400 text-sm">Model</span>
112-
<span class="text-white">Llama 3.1 8b</span>
113-
</li>
114-
<li class="flex justify-between items-center">
115-
<span class="text-gray-400 text-sm">PRD Type</span>
116-
<span class="text-white">Narrative</span>
117-
</li>
118-
<li class="flex justify-between items-center">
119-
<span class="text-gray-400 text-sm">User Story</span>
120-
<span class="text-white">User-Focused</span>
121-
</li>
122-
</ul>
123-
<div class="h-[1px] bg-gray-800 my-4"></div>
124-
<p class="text-sm text-gray-400">
125-
Optimized for user experience flows.
126-
</p>
127-
</div>
128-
<div class="bg-black p-6 rounded-xl border border-gray-800 hover:border-white transition-all duration-300">
129-
<div class="flex items-center gap-3 mb-4">
130-
<span class="text-2xl">🔬</span>
131-
<h3 class="text-lg font-medium text-white">Research</h3>
58+
<div class="h-px bg-gray-800 my-4"></div>
59+
60+
<p class="text-sm text-gray-400">{preset.description}</p>
13261
</div>
133-
<ul class="space-y-3">
134-
<li class="flex justify-between items-center">
135-
<span class="text-gray-400 text-sm">Platform</span>
136-
<span class="text-white">Gemini</span>
137-
</li>
138-
<li class="flex justify-between items-center">
139-
<span class="text-gray-400 text-sm">Model</span>
140-
<span class="text-white">Gemini 2 Flash</span>
141-
</li>
142-
<li class="flex justify-between items-center">
143-
<span class="text-gray-400 text-sm">PRD Type</span>
144-
<span class="text-white">Research</span>
145-
</li>
146-
<li class="flex justify-between items-center">
147-
<span class="text-gray-400 text-sm">User Story</span>
148-
<span class="text-white">Research</span>
149-
</li>
150-
</ul>
151-
<div class="h-[1px] bg-gray-800 my-4"></div>
152-
<p class="text-sm text-gray-400">
153-
Ideal for research projects and experiments.
154-
</p>
155-
</div>
62+
{/each}
15663
</div>
15764
</div>
15865

@@ -162,88 +69,32 @@
16269
<span>🎯</span>
16370
<span>Model & Settings Guide</span>
16471
</h2>
165-
16672
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
167-
<!-- AI Platforms Card -->
168-
<div class="bg-black p-6 rounded-xl border border-gray-800 hover:border-white transition-all duration-300">
73+
{#each modelGuide as card}
74+
<div class="bg-black p-6 rounded-xl border border-gray-800 hover:border-white transition-all duration-300">
16975
<div class="flex items-center gap-3 mb-4">
170-
<span class="text-2xl">🤖</span>
171-
<h3 class="text-lg font-medium text-white">AI Platforms</h3>
172-
</div>
173-
<div class="space-y-4">
174-
<div class="space-y-2">
175-
<h4 class="text-purple-400">Groq</h4>
176-
<p class="text-sm text-gray-300">Llama 3.3 70b, Gemma 2 9b, Mixtral 8x7b</p>
177-
<p class="text-xs text-gray-400">Best for: Enterprise-grade inference</p>
178-
</div>
179-
<div class="space-y-2">
180-
<h4 class="text-purple-400">LM Studio</h4>
181-
<p class="text-sm text-gray-300">Llama 3.1 8b, Qwen 2.5 14b</p>
182-
<p class="text-xs text-gray-400">Best for: Local development</p>
183-
</div>
184-
<div class="space-y-2">
185-
<h4 class="text-purple-400">Gemini</h4>
186-
<p class="text-sm text-gray-300">Gemini 2 Flash, Gemini 1.5 Flash</p>
187-
<p class="text-xs text-gray-400">Best for: Complex reasoning</p>
188-
</div>
76+
<span class="text-2xl">{card.icon}</span>
77+
<h3 class="text-lg font-medium text-white">{card.title}</h3>
18978
</div>
190-
</div>
19179

192-
<!-- PRD Types Card -->
193-
<div class="bg-black p-6 rounded-xl border border-gray-800 hover:border-white transition-all duration-300">
194-
<div class="flex items-center gap-3 mb-4">
195-
<span class="text-2xl">📝</span>
196-
<h3 class="text-lg font-medium text-white">PRD Types</h3>
197-
</div>
19880
<div class="space-y-4">
199-
<div class="space-y-2">
200-
<h4 class="text-green-400">Feature Based</h4>
201-
<p class="text-xs text-gray-400">Best for: Detailed enterprise projects</p>
202-
</div>
203-
<div class="space-y-2">
204-
<h4 class="text-green-400">Focused</h4>
205-
<p class="text-xs text-gray-400">Best for: Mid-sized projects</p>
206-
</div>
207-
<div class="space-y-2">
208-
<h4 class="text-green-400">Minimal</h4>
209-
<p class="text-xs text-gray-400">Best for: Quick MVPs</p>
210-
</div>
211-
<div class="space-y-2">
212-
<h4 class="text-green-400">Narrative</h4>
213-
<p class="text-xs text-gray-400">Best for: User-centric experiences</p>
214-
</div>
215-
<div class="space-y-2">
216-
<h4 class="text-green-400">Research</h4>
217-
<p class="text-xs text-gray-400">Best for: Research and experimental projects</p>
218-
</div>
219-
</div>
220-
</div>
221-
222-
<!-- User Story Types Card -->
223-
<div class="bg-black p-6 rounded-xl border border-gray-800 hover:border-white transition-all duration-300">
224-
<div class="flex items-center gap-3 mb-4">
225-
<span class="text-2xl">📚</span>
226-
<h3 class="text-lg font-medium text-white">Story Types</h3>
81+
{#each card.sections as section}
82+
{#if Array.isArray(section)}
83+
<div class="space-y-1">
84+
<h4 class={card.accent}>{section[0]}</h4>
85+
<p class="text-xs text-gray-400">Best for: {section[1]}</p>
86+
</div>
87+
{:else}
88+
<div class="space-y-1">
89+
<h4 class="text-purple-400">{section.title}</h4>
90+
<p class="text-sm text-gray-300">{section.detail}</p>
91+
<p class="text-xs text-gray-400">{section.hint}</p>
92+
</div>
93+
{/if}
94+
{/each}
22795
</div>
228-
<div class="space-y-4">
229-
<div class="space-y-2">
230-
<h4 class="text-blue-400">Technical</h4>
231-
<p class="text-xs text-gray-400">Best for: System architecture</p>
232-
</div>
233-
<div class="space-y-2">
234-
<h4 class="text-blue-400">User-Focused</h4>
235-
<p class="text-xs text-gray-400">Best for: UX-driven features</p>
236-
</div>
237-
<div class="space-y-2">
238-
<h4 class="text-blue-400">Minimal</h4>
239-
<p class="text-xs text-gray-400">Best for: Core functionality</p>
240-
</div>
241-
<div class="space-y-2">
242-
<h4 class="text-blue-400">Research</h4>
243-
<p class="text-xs text-gray-400">Best for: Research-oriented tasks</p>
244-
</div>
24596
</div>
246-
</div>
97+
{/each}
24798
</div>
24899
</div>
249100

‎autoproject/src/routes/about/content.config.ts‎

Lines changed: 97 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,97 @@
1+
export const quickPresets = [
2+
{
3+
id: 'rapid',
4+
icon: '🚀',
5+
title: 'Rapid POC',
6+
description: 'Zero to MVP in record time. Perfect for quick validation.',
7+
items: [
8+
['Platform', 'Groq'],
9+
['Model', 'Kimi K2'],
10+
['PRD Type', 'Minimal'],
11+
['User Story', 'Minimal'],
12+
],
13+
},
14+
{
15+
id: 'enterprise',
16+
icon: '🏢',
17+
title: 'Enterprise',
18+
description: 'Built for complex projects requiring technical depth.',
19+
items: [
20+
['Platform', 'Gemini'],
21+
['Model', 'Gemini 2.5 Flash'],
22+
['PRD Type', 'Feature Based'],
23+
['User Story', 'Technical'],
24+
],
25+
},
26+
{
27+
id: 'user',
28+
icon: '👥',
29+
title: 'User-Centric',
30+
description: 'Optimized for user experience flows.',
31+
items: [
32+
['Platform', 'LM Studio'],
33+
['Model', 'Llama 3.1 8b'],
34+
['PRD Type', 'Narrative'],
35+
['User Story', 'User-Focused'],
36+
],
37+
},
38+
{
39+
id: 'research',
40+
icon: '🔬',
41+
title: 'Research',
42+
description: 'Ideal for research projects and experiments.',
43+
items: [
44+
['Platform', 'Gemini'],
45+
['Model', 'Gemini 3 Pro'],
46+
['PRD Type', 'Research'],
47+
['User Story', 'Research'],
48+
],
49+
},
50+
]
51+
52+
export const modelGuide = [
53+
{
54+
icon: '🤖',
55+
title: 'AI Platforms',
56+
sections: [
57+
{
58+
title: 'Groq',
59+
detail: 'Llama 3.3 70b, Kimi K2, Llama 4 Maverick',
60+
hint: 'Best for: Enterprise-grade inference',
61+
},
62+
{
63+
title: 'LM Studio',
64+
detail: 'Llama 3.1 8b, Granite 4H Tiny, Gemma 3 12b, Phi 4',
65+
hint: 'Best for: Local development',
66+
},
67+
{
68+
title: 'Gemini',
69+
detail: 'Gemini 2.5 Flash, Gemini 3 Pro',
70+
hint: 'Best for: Complex reasoning',
71+
},
72+
],
73+
},
74+
{
75+
icon: '📝',
76+
title: 'PRD Types',
77+
sections: [
78+
['Feature Based', 'Detailed enterprise projects'],
79+
['Focused', 'Mid-sized projects'],
80+
['Minimal', 'Quick MVPs'],
81+
['Narrative', 'User-centric experiences'],
82+
['Research', 'Research and experiments'],
83+
],
84+
accent: 'text-green-400',
85+
},
86+
{
87+
icon: '📚',
88+
title: 'Story Types',
89+
sections: [
90+
['Technical', 'System architecture'],
91+
['User-Focused', 'UX-driven features'],
92+
['Minimal', 'Core functionality'],
93+
['Research', 'Research-oriented tasks'],
94+
],
95+
accent: 'text-blue-400',
96+
},
97+
]

0 commit comments

Comments
 (0)