@emberkit/cli 0.5.1 → 0.6.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/commands/create.js +7 -6
- package/dist/templates/action.js +12 -0
- package/dist/templates/api/api.js +280 -0
- package/dist/templates/apiRoute.js +20 -0
- package/dist/templates/blog/blog.js +358 -0
- package/dist/templates/component.js +14 -0
- package/dist/templates/config.js +13 -0
- package/dist/templates/context.js +21 -0
- package/dist/templates/dashboard/dashboard.js +406 -0
- package/dist/templates/entry.js +15 -0
- package/dist/templates/errorBoundary.js +17 -0
- package/dist/templates/form.js +59 -0
- package/dist/templates/index.js +0 -260
- package/dist/templates/layout.js +16 -0
- package/dist/templates/layoutRoutes.js +9 -0
- package/dist/templates/loader.js +10 -0
- package/dist/templates/minimal/minimal.js +89 -0
- package/dist/templates/projects/starter.js +286 -0
- package/dist/templates/projects/with-ui.js +445 -0
- package/dist/templates/projects.js +419 -191
- package/dist/templates/route.js +12 -0
- package/dist/templates/saas/saas.js +539 -0
- package/dist/templates/signal.js +25 -0
- package/dist/utils/filesystem.js +10 -12
- package/dist/utils/generator.js +30 -2
- package/package.json +1 -1
|
@@ -0,0 +1,445 @@
|
|
|
1
|
+
export const withUiTemplate = {
|
|
2
|
+
"package.json": `{
|
|
3
|
+
"name": "{{name}}",
|
|
4
|
+
"version": "0.1.0",
|
|
5
|
+
"private": true,
|
|
6
|
+
"type": "module",
|
|
7
|
+
"scripts": {
|
|
8
|
+
"dev": "emberkit dev",
|
|
9
|
+
"build": "emberkit build",
|
|
10
|
+
"preview": "emberkit preview",
|
|
11
|
+
"lint": "eslint src --ext .ts,.tsx",
|
|
12
|
+
"format": "prettier --write \"src/**/*.{ts,tsx}\""
|
|
13
|
+
},
|
|
14
|
+
"dependencies": {
|
|
15
|
+
"@emberkit/core": "^0.2.4",
|
|
16
|
+
"@emberkit/ui": "^0.2.3"
|
|
17
|
+
},
|
|
18
|
+
"devDependencies": {
|
|
19
|
+
"@emberkit/cli": "^0.2.4",
|
|
20
|
+
"typescript": "^5.7.0",
|
|
21
|
+
"vite": "^6.0.0",
|
|
22
|
+
"tailwindcss": "^4.0.0",
|
|
23
|
+
"@tailwindcss/vite": "^4.0.0"
|
|
24
|
+
}
|
|
25
|
+
}`,
|
|
26
|
+
"tsconfig.json": `{
|
|
27
|
+
"compilerOptions": {
|
|
28
|
+
"target": "ES2022",
|
|
29
|
+
"module": "ESNext",
|
|
30
|
+
"moduleResolution": "bundler",
|
|
31
|
+
"jsx": "react-jsx",
|
|
32
|
+
"jsxImportSource": "@emberkit/core",
|
|
33
|
+
"strict": true,
|
|
34
|
+
"esModuleInterop": true,
|
|
35
|
+
"skipLibCheck": true,
|
|
36
|
+
"forceConsistentCasingInFileNames": true,
|
|
37
|
+
"resolveJsonModule": true,
|
|
38
|
+
"isolatedModules": true,
|
|
39
|
+
"noEmit": true,
|
|
40
|
+
"lib": ["ES2022", "DOM", "DOM.Iterable"],
|
|
41
|
+
"paths": {
|
|
42
|
+
"@/*": ["./src/*"]
|
|
43
|
+
}
|
|
44
|
+
},
|
|
45
|
+
"include": ["src"],
|
|
46
|
+
"exclude": ["node_modules", "dist"]
|
|
47
|
+
}`,
|
|
48
|
+
"vite.config.ts": `import { defineConfig } from 'vite';
|
|
49
|
+
import { emberkitVitePlugin } from '@emberkit/core/vite-plugin';
|
|
50
|
+
import tailwindcss from '@tailwindcss/vite';
|
|
51
|
+
|
|
52
|
+
export default defineConfig({
|
|
53
|
+
plugins: [emberkitVitePlugin(), tailwindcss()],
|
|
54
|
+
server: {
|
|
55
|
+
port: 3000,
|
|
56
|
+
host: 'localhost',
|
|
57
|
+
},
|
|
58
|
+
esbuild: {
|
|
59
|
+
jsxImportSource: '@emberkit/core',
|
|
60
|
+
},
|
|
61
|
+
});`,
|
|
62
|
+
"index.html": `<!DOCTYPE html>
|
|
63
|
+
<html lang="en">
|
|
64
|
+
<head>
|
|
65
|
+
<meta charset="UTF-8">
|
|
66
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
67
|
+
<title>{{name}}</title>
|
|
68
|
+
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
69
|
+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
70
|
+
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
|
|
71
|
+
</head>
|
|
72
|
+
<body id="app">
|
|
73
|
+
<script type="module" src="/src/index.tsx"></script>
|
|
74
|
+
</body>
|
|
75
|
+
</html>`,
|
|
76
|
+
"src/index.tsx": `import { render } from '@emberkit/core';
|
|
77
|
+
import { routes } from 'virtual:emberkit-routes';
|
|
78
|
+
import App from './routes/_layout';
|
|
79
|
+
import './styles.css';
|
|
80
|
+
|
|
81
|
+
const root = document.getElementById('app');
|
|
82
|
+
|
|
83
|
+
if (root) {
|
|
84
|
+
try {
|
|
85
|
+
render(App, root, { routes });
|
|
86
|
+
} catch (error) {
|
|
87
|
+
console.error('[entry] Render error:', error);
|
|
88
|
+
}
|
|
89
|
+
}`,
|
|
90
|
+
"src/styles.css": `@import "tailwindcss";
|
|
91
|
+
|
|
92
|
+
@theme {
|
|
93
|
+
--color-ember-50: #fff7ed;
|
|
94
|
+
--color-ember-100: #ffedd5;
|
|
95
|
+
--color-ember-200: #fed7aa;
|
|
96
|
+
--color-ember-300: #fdba74;
|
|
97
|
+
--color-ember-400: #fb923c;
|
|
98
|
+
--color-ember-500: #f97316;
|
|
99
|
+
--color-ember-600: #ea580c;
|
|
100
|
+
--color-ember-700: #c2410c;
|
|
101
|
+
--color-ember-800: #9a3412;
|
|
102
|
+
--color-ember-900: #7c2d12;
|
|
103
|
+
--font-family-sans: 'Inter', system-ui, sans-serif;
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
@keyframes float {
|
|
107
|
+
0%, 100% { transform: translateY(0px); }
|
|
108
|
+
50% { transform: translateY(-20px); }
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
@keyframes fade-in-up {
|
|
112
|
+
from { opacity: 0; transform: translateY(20px); }
|
|
113
|
+
to { opacity: 1; transform: translateY(0); }
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
@keyframes fade-in-down {
|
|
117
|
+
from { opacity: 0; transform: translateY(-20px); }
|
|
118
|
+
to { opacity: 1; transform: translateY(0); }
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
@keyframes pulse-glow {
|
|
122
|
+
0%, 100% { opacity: 0.4; transform: scale(1); }
|
|
123
|
+
50% { opacity: 0.6; transform: scale(1.05); }
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
body {
|
|
127
|
+
@apply bg-[#0b0f19] text-slate-200 font-sans;
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
a {
|
|
131
|
+
@apply text-inherit no-underline;
|
|
132
|
+
}
|
|
133
|
+
|
|
134
|
+
.animate-float { animation: float 6s ease-in-out infinite; }
|
|
135
|
+
.animate-fade-in-up { animation: fade-in-up 0.6s ease-out forwards; }
|
|
136
|
+
.animate-fade-in-down { animation: fade-in-down 0.6s ease-out forwards; }
|
|
137
|
+
.animate-pulse-glow { animation: pulse-glow 4s ease-in-out infinite; }`,
|
|
138
|
+
"src/routes/_layout.tsx": `import type { RouteComponent } from '@emberkit/core';
|
|
139
|
+
import { Head } from '@emberkit/core';
|
|
140
|
+
import { DefaultLayout } from '@emberkit/ui';
|
|
141
|
+
|
|
142
|
+
const Layout: RouteComponent = ({ children }) => {
|
|
143
|
+
return (
|
|
144
|
+
<>
|
|
145
|
+
<Head>
|
|
146
|
+
<title>{{name}}</title>
|
|
147
|
+
<meta name="description" content="Built with EmberKit UI" />
|
|
148
|
+
</Head>
|
|
149
|
+
<div className="relative min-h-screen">
|
|
150
|
+
<div className="pointer-events-none fixed inset-0 overflow-hidden">
|
|
151
|
+
<div className="absolute -top-40 -right-40 w-96 h-96 rounded-full bg-ember-500/10 blur-[120px] animate-pulse-glow" />
|
|
152
|
+
<div className="absolute -bottom-40 -left-40 w-96 h-96 rounded-full bg-amber-500/5 blur-[120px] animate-pulse-glow" style={{ animationDelay: '2s' }} />
|
|
153
|
+
</div>
|
|
154
|
+
<DefaultLayout
|
|
155
|
+
logo={
|
|
156
|
+
<span className="flex items-center gap-2">
|
|
157
|
+
<span className="text-2xl animate-float">🔥</span>
|
|
158
|
+
<span className="font-bold text-xl bg-gradient-to-r from-ember-400 to-ember-600 bg-clip-text text-transparent">{{name}}</span>
|
|
159
|
+
</span>
|
|
160
|
+
}
|
|
161
|
+
navItems={[
|
|
162
|
+
{ label: 'Home', href: '/' },
|
|
163
|
+
{ label: 'About', href: '/about' },
|
|
164
|
+
{ label: 'Docs', href: 'https://emberkit.dev/docs', external: true },
|
|
165
|
+
]}
|
|
166
|
+
>
|
|
167
|
+
{children}
|
|
168
|
+
</DefaultLayout>
|
|
169
|
+
</div>
|
|
170
|
+
</>
|
|
171
|
+
);
|
|
172
|
+
};
|
|
173
|
+
|
|
174
|
+
export default Layout;`,
|
|
175
|
+
"src/routes/index.tsx": `import type { RouteComponent } from '@emberkit/core';
|
|
176
|
+
import { Button, Card, Heading, Text, Badge, Input } from '@emberkit/ui';
|
|
177
|
+
import { signal } from '@emberkit/core';
|
|
178
|
+
|
|
179
|
+
const HomePage: RouteComponent = () => {
|
|
180
|
+
const email = signal('');
|
|
181
|
+
const activeTab = signal('buttons');
|
|
182
|
+
|
|
183
|
+
return (
|
|
184
|
+
<div className="relative space-y-24">
|
|
185
|
+
{/* Hero */}
|
|
186
|
+
<section className="relative text-center py-20">
|
|
187
|
+
<div className="pointer-events-none absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 h-[400px] w-[400px] rounded-full bg-ember-500/15 blur-[150px] animate-pulse-glow" />
|
|
188
|
+
|
|
189
|
+
<div className="relative z-10 animate-fade-in-down">
|
|
190
|
+
<Badge variant="primary" className="mb-6 inline-flex">
|
|
191
|
+
✨ Built with EmberKit UI
|
|
192
|
+
</Badge>
|
|
193
|
+
<Heading level="h1" size="4xl" weight="bold" className="mb-6">
|
|
194
|
+
Welcome to {' '}
|
|
195
|
+
<span className="bg-gradient-to-r from-ember-400 via-ember-500 to-amber-500 bg-clip-text text-transparent">
|
|
196
|
+
{{name}}
|
|
197
|
+
</span>
|
|
198
|
+
</Heading>
|
|
199
|
+
<Text size="xl" color="muted" className="max-w-2xl mx-auto mb-10">
|
|
200
|
+
A modern starter template with EmberKit UI components and Tailwind CSS.
|
|
201
|
+
Build beautiful interfaces with our pre-built component library.
|
|
202
|
+
</Text>
|
|
203
|
+
<div className="flex gap-4 justify-center">
|
|
204
|
+
<Button variant="primary" size="lg" className="shadow-lg shadow-ember-500/20 hover:shadow-ember-500/40 transition-shadow">
|
|
205
|
+
Get Started
|
|
206
|
+
</Button>
|
|
207
|
+
<Button variant="secondary" size="lg">
|
|
208
|
+
View Docs →
|
|
209
|
+
</Button>
|
|
210
|
+
</div>
|
|
211
|
+
</div>
|
|
212
|
+
</section>
|
|
213
|
+
|
|
214
|
+
{/* Features Grid */}
|
|
215
|
+
<section>
|
|
216
|
+
<Heading level="h2" size="2xl" weight="semibold" className="mb-2 text-center">
|
|
217
|
+
Why EmberKit?
|
|
218
|
+
</Heading>
|
|
219
|
+
<Text color="muted" className="text-center mb-10 max-w-lg mx-auto">
|
|
220
|
+
Everything you need to build fast, beautiful web applications.
|
|
221
|
+
</Text>
|
|
222
|
+
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
|
223
|
+
{[
|
|
224
|
+
{ icon: '⚡', title: 'Lightning Fast', desc: 'Sub-10KB runtime with tree-shakeable architecture' },
|
|
225
|
+
{ icon: '🔯', title: 'TypeScript First', desc: 'Full type safety with intelligent autocomplete' },
|
|
226
|
+
{ icon: '🛖', title: 'File-Based Routing', desc: 'Routes automatically created from your file structure' },
|
|
227
|
+
].map((f, i) => (
|
|
228
|
+
<Card key={f.title} padding="lg" className="relative group hover:border-ember-500/50 transition-all duration-300 hover:-translate-y-1" style={{ animationDelay: \`\[PHONE REDACTED]ms\` }}>
|
|
229
|
+
<div className="absolute inset-0 rounded-xl bg-gradient-to-br from-ember-500/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity" />
|
|
230
|
+
<div className="relative">
|
|
231
|
+
<div className="w-12 h-12 rounded-xl bg-ember-500/10 flex items-center justify-center text-2xl mb-4 group-hover:scale-110 transition-transform">
|
|
232
|
+
{f.icon}
|
|
233
|
+
</div>
|
|
234
|
+
<Heading level="h3" size="lg" weight="semibold" className="mb-2">
|
|
235
|
+
{f.title}
|
|
236
|
+
</Heading>
|
|
237
|
+
<Text color="muted">{f.desc}</Text>
|
|
238
|
+
</div>
|
|
239
|
+
</Card>
|
|
240
|
+
))}
|
|
241
|
+
</div>
|
|
242
|
+
</section>
|
|
243
|
+
|
|
244
|
+
{/* Component Showcase */}
|
|
245
|
+
<section>
|
|
246
|
+
<Heading level="h2" size="2xl" weight="semibold" className="mb-2 text-center">
|
|
247
|
+
UI Components
|
|
248
|
+
</Heading>
|
|
249
|
+
<Text color="muted" className="text-center mb-8">
|
|
250
|
+
Explore our pre-built component library.
|
|
251
|
+
</Text>
|
|
252
|
+
|
|
253
|
+
{/* Tabs */}
|
|
254
|
+
<div className="flex justify-center mb-8">
|
|
255
|
+
<div className="inline-flex p-1 rounded-lg bg-slate-800/50 border border-slate-700/50">
|
|
256
|
+
{[
|
|
257
|
+
{ id: 'buttons', label: 'Buttons' },
|
|
258
|
+
{ id: 'cards', label: 'Cards' },
|
|
259
|
+
{ id: 'forms', label: 'Forms' },
|
|
260
|
+
].map((tab) => (
|
|
261
|
+
<button
|
|
262
|
+
key={tab.id}
|
|
263
|
+
className={\`px-4 py-2 text-sm font-medium rounded-md transition-all \$\{activeTab.value === tab.id ? 'bg-ember-500 text-white shadow-md' : 'text-slate-400 hover:text-slate-200'\}}\`}
|
|
264
|
+
onClick={() => { activeTab.value = tab.id; }}
|
|
265
|
+
>
|
|
266
|
+
{tab.label}
|
|
267
|
+
</button>
|
|
268
|
+
))}
|
|
269
|
+
</div>
|
|
270
|
+
</div>
|
|
271
|
+
|
|
272
|
+
{/* Tab Content */}
|
|
273
|
+
{activeTab.value === 'buttons' && (
|
|
274
|
+
<Card padding="xl" className="max-w-2xl mx-auto">
|
|
275
|
+
<div className="text-center mb-6">
|
|
276
|
+
<Badge variant="primary" className="mb-2">Buttons</Badge>
|
|
277
|
+
<Heading level="h3" size="lg" weight="semibold">Button Variants</Heading>
|
|
278
|
+
</div>
|
|
279
|
+
<div className="flex flex-wrap gap-3 justify-center">
|
|
280
|
+
<Button variant="primary">Primary</Button>
|
|
281
|
+
<Button variant="secondary">Secondary</Button>
|
|
282
|
+
<Button variant="ghost">Ghost</Button>
|
|
283
|
+
<Button variant="primary" size="sm">Small</Button>
|
|
284
|
+
<Button variant="secondary" size="lg">Large</Button>
|
|
285
|
+
</div>
|
|
286
|
+
<div className="mt-6 pt-6 border-t border-slate-700/50">
|
|
287
|
+
<Heading level="h4" size="sm" weight="semibold" className="mb-3 text-slate-400">With Icons</Heading>
|
|
288
|
+
<div className="flex flex-wrap gap-3 justify-center">
|
|
289
|
+
<Button variant="primary">⚡ Get Started</Button>
|
|
290
|
+
<Button variant="secondary">Learn More →</Button>
|
|
291
|
+
<Button variant="ghost">❤ Like</Button>
|
|
292
|
+
</div>
|
|
293
|
+
</div>
|
|
294
|
+
</Card>
|
|
295
|
+
)}
|
|
296
|
+
|
|
297
|
+
{activeTab.value === 'cards' && (
|
|
298
|
+
<div className="grid md:grid-cols-2 gap-6 max-w-3xl mx-auto">
|
|
299
|
+
<Card padding="lg" className="hover:border-ember-500/50 transition-colors">
|
|
300
|
+
<Badge variant="success" className="mb-3">Analytics</Badge>
|
|
301
|
+
<Heading level="h3" size="lg" weight="semibold" className="mb-2">
|
|
302
|
+
Revenue Growth
|
|
303
|
+
</Heading>
|
|
304
|
+
<div className="text-3xl font-bold text-ember-400 mb-1">$45,231</div>
|
|
305
|
+
<Text color="muted" className="text-sm">+20.1% from last month</Text>
|
|
306
|
+
<div className="mt-4 h-2 rounded-full bg-slate-700 overflow-hidden">
|
|
307
|
+
<div className="h-full w-3/4 rounded-full bg-gradient-to-r from-ember-500 to-amber-500" />
|
|
308
|
+
</div>
|
|
309
|
+
</Card>
|
|
310
|
+
<Card padding="lg" className="hover:border-ember-500/50 transition-colors">
|
|
311
|
+
<Badge variant="info" className="mb-3">Users</Badge>
|
|
312
|
+
<Heading level="h3" size="lg" weight="semibold" className="mb-2">
|
|
313
|
+
Active Users
|
|
314
|
+
</Heading>
|
|
315
|
+
<div className="text-3xl font-bold text-blue-400 mb-1">2,338</div>
|
|
316
|
+
<Text color="muted" className="text-sm">+15.3% from last month</Text>
|
|
317
|
+
<div className="mt-4 h-2 rounded-full bg-slate-700 overflow-hidden">
|
|
318
|
+
<div className="h-full w-1/2 rounded-full bg-gradient-to-r from-blue-500 to-cyan-500" />
|
|
319
|
+
</div>
|
|
320
|
+
</Card>
|
|
321
|
+
</div>
|
|
322
|
+
)}
|
|
323
|
+
|
|
324
|
+
{activeTab.value === 'forms' && (
|
|
325
|
+
<Card padding="xl" className="max-w-md mx-auto">
|
|
326
|
+
<div className="text-center mb-6">
|
|
327
|
+
<Badge variant="info" className="mb-2">Forms</Badge>
|
|
328
|
+
<Heading level="h3" size="lg" weight="semibold">Newsletter Signup</Heading>
|
|
329
|
+
</div>
|
|
330
|
+
<div className="space-y-4">
|
|
331
|
+
<Input
|
|
332
|
+
label="Name"
|
|
333
|
+
placeholder="John Doe"
|
|
334
|
+
/>
|
|
335
|
+
<Input
|
|
336
|
+
label="Email"
|
|
337
|
+
type="email"
|
|
338
|
+
placeholder="you@example.com"
|
|
339
|
+
value={email.value}
|
|
340
|
+
onChange={(e) => { email.value = e.currentTarget.value; }}
|
|
341
|
+
/>
|
|
342
|
+
<Button variant="primary" className="w-full shadow-lg shadow-ember-500/20">
|
|
343
|
+
Subscribe ➤
|
|
344
|
+
</Button>
|
|
345
|
+
</div>
|
|
346
|
+
</Card>
|
|
347
|
+
)}
|
|
348
|
+
</section>
|
|
349
|
+
|
|
350
|
+
{/* CTA */}
|
|
351
|
+
<section className="relative py-20">
|
|
352
|
+
<div className="pointer-events-none absolute inset-0 flex items-center justify-center">
|
|
353
|
+
<div className="w-[500px] h-[200px] rounded-full bg-ember-500/10 blur-[100px]" />
|
|
354
|
+
</div>
|
|
355
|
+
<div className="relative z-10 text-center">
|
|
356
|
+
<Heading level="h2" size="2xl" weight="semibold" className="mb-4">
|
|
357
|
+
Ready to build something amazing?
|
|
358
|
+
</Heading>
|
|
359
|
+
<Text color="muted" className="max-w-xl mx-auto mb-8">
|
|
360
|
+
Start building your next project with EmberKit's powerful components and TypeScript-first API.
|
|
361
|
+
</Text>
|
|
362
|
+
<Button variant="primary" size="lg" className="shadow-lg shadow-ember-500/25 hover:shadow-ember-500/40 transition-shadow">
|
|
363
|
+
Create Project ➤
|
|
364
|
+
</Button>
|
|
365
|
+
</div>
|
|
366
|
+
</section>
|
|
367
|
+
</div>
|
|
368
|
+
);
|
|
369
|
+
};
|
|
370
|
+
|
|
371
|
+
export default HomePage;`,
|
|
372
|
+
"src/routes/about.tsx": `import type { RouteComponent } from '@emberkit/core';
|
|
373
|
+
import { Head } from '@emberkit/core';
|
|
374
|
+
import { Heading, Text, Button, Card, Badge } from '@emberkit/ui';
|
|
375
|
+
|
|
376
|
+
const AboutPage: RouteComponent = () => {
|
|
377
|
+
return (
|
|
378
|
+
<>
|
|
379
|
+
<Head>
|
|
380
|
+
<title>About - {{name}}</title>
|
|
381
|
+
</Head>
|
|
382
|
+
<div className="max-w-3xl mx-auto py-12 space-y-12">
|
|
383
|
+
{/* Header */}
|
|
384
|
+
<div className="text-center">
|
|
385
|
+
<Badge variant="primary" className="mb-4 inline-flex">About</Badge>
|
|
386
|
+
<Heading level="h1" size="3xl" weight="bold">
|
|
387
|
+
About {' '}
|
|
388
|
+
<span className="bg-gradient-to-r from-ember-400 to-ember-600 bg-clip-text text-transparent">{{name}}</span>
|
|
389
|
+
</Heading>
|
|
390
|
+
</div>
|
|
391
|
+
|
|
392
|
+
{/* Description */}
|
|
393
|
+
<Card padding="xl" className="border-ember-500/20">
|
|
394
|
+
<Text size="lg" color="muted" className="leading-relaxed">
|
|
395
|
+
This project was created with EmberKit and the UI component library.
|
|
396
|
+
It demonstrates how to build modern, beautiful interfaces with our
|
|
397
|
+
pre-built components and Tailwind CSS.
|
|
398
|
+
</Text>
|
|
399
|
+
</Card>
|
|
400
|
+
|
|
401
|
+
{/* Features */}
|
|
402
|
+
<div className="grid sm:grid-cols-2 gap-4">
|
|
403
|
+
{[
|
|
404
|
+
{ icon: '🔌', title: 'TypeScript-first', desc: 'Full type safety with intelligent autocomplete' },
|
|
405
|
+
{ icon: '🎨', title: 'UI Components', desc: 'Pre-built atoms, molecules, and organisms' },
|
|
406
|
+
{ icon: '🌈', title: 'Tailwind CSS', desc: 'Utility-first styling with custom theme' },
|
|
407
|
+
{ icon: '🛖', title: 'File Routing', desc: 'Automatic routes from your file structure' },
|
|
408
|
+
].map((f) => (
|
|
409
|
+
<Card key={f.title} padding="lg" className="hover:border-ember-500/50 transition-all hover:-translate-y-0.5">
|
|
410
|
+
<div className="text-2xl mb-3">{f.icon}</div>
|
|
411
|
+
<Heading level="h3" size="md" weight="semibold" className="mb-1">
|
|
412
|
+
{f.title}
|
|
413
|
+
</Heading>
|
|
414
|
+
<Text color="muted" size="sm">{f.desc}</Text>
|
|
415
|
+
</Card>
|
|
416
|
+
))}
|
|
417
|
+
</div>
|
|
418
|
+
|
|
419
|
+
{/* Tech Stack */}
|
|
420
|
+
<Card padding="xl">
|
|
421
|
+
<Heading level="h3" size="lg" weight="semibold" className="mb-4 text-center">
|
|
422
|
+
Tech Stack
|
|
423
|
+
</Heading>
|
|
424
|
+
<div className="flex flex-wrap gap-2 justify-center">
|
|
425
|
+
{['EmberKit', 'TypeScript', 'Tailwind CSS', 'Vite', 'JSX'].map((tech) => (
|
|
426
|
+
<Badge key={tech} variant="primary" className="px-3 py-1.5">
|
|
427
|
+
{tech}
|
|
428
|
+
</Badge>
|
|
429
|
+
))}
|
|
430
|
+
</div>
|
|
431
|
+
</Card>
|
|
432
|
+
|
|
433
|
+
{/* Back */}
|
|
434
|
+
<div className="text-center">
|
|
435
|
+
<Button variant="secondary">
|
|
436
|
+
← Back to Home
|
|
437
|
+
</Button>
|
|
438
|
+
</div>
|
|
439
|
+
</div>
|
|
440
|
+
</>
|
|
441
|
+
);
|
|
442
|
+
};
|
|
443
|
+
|
|
444
|
+
export default AboutPage;`,
|
|
445
|
+
};
|