create-flexireact 3.0.6 → 4.0.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/README.md CHANGED
@@ -1,6 +1,6 @@
1
1
  # create-flexireact
2
2
 
3
- Create FlexiReact v2 apps with one command.
3
+ Create FlexiReact v4 apps with one command.
4
4
 
5
5
  ## Usage
6
6
 
@@ -22,16 +22,17 @@ npm create flexireact@latest my-app
22
22
  | **Minimal** | Bare minimum FlexiReact setup |
23
23
  | **App Router** | Next.js style `app/` directory routing |
24
24
 
25
- ## What's New in v2
25
+ ## What's New in v3.1
26
26
 
27
+ - ⚛️ **React 19 Stable** — Full support for Actions and useActionState
27
28
  - 🆕 **TypeScript Native** — CLI rewritten in TypeScript
28
29
  - 🎨 **Tailwind CSS v4** — New `@import "tailwindcss"` syntax
29
30
  - 📁 **Routes Directory** — New `routes/` with route groups
30
- - ⚡ **Modern Templates** — Beautiful, production-ready starters
31
+ - ⚡ **Modern Templates** — Beautiful, production-ready starters with React 19 defaults
31
32
 
32
33
  ## What's Included
33
34
 
34
- - ⚡ **FlexiReact v2** — The Modern React Framework
35
+ - ⚡ **FlexiReact v4** — The Modern React Framework with React 19
35
36
  - 📘 **TypeScript** — Full type safety
36
37
  - 🎨 **Tailwind CSS v4** — Latest styling features
37
38
  - 📁 **File-based routing** — `routes/`, `app/`, or `pages/`
@@ -1 +1 @@
1
- {"version":3,"file":"app-router.d.ts","sourceRoot":"","sources":["../../src/templates/app-router.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAEhD,wBAAgB,iBAAiB,CAAC,WAAW,EAAE,MAAM,GAAG,aAAa,CAyoBpE"}
1
+ {"version":3,"file":"app-router.d.ts","sourceRoot":"","sources":["../../src/templates/app-router.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAEhD,wBAAgB,iBAAiB,CAAC,WAAW,EAAE,MAAM,GAAG,aAAa,CA0UpE"}
@@ -140,361 +140,78 @@ const stats = [
140
140
 
141
141
  export default function HomePage() {
142
142
  return (
143
- <div className="min-h-screen bg-[#0a0a0a]">
144
- {/* Premium Navbar */}
145
- <header className="fixed top-0 left-0 right-0 z-50 bg-[#0a0a0a]/80 backdrop-blur-xl border-b border-gray-800/50">
146
- <nav className="max-w-7xl mx-auto px-4 h-16 flex items-center justify-between">
147
- <a href="/" className="flex items-center gap-3">
148
- <div className="w-9 h-9 rounded-lg bg-gradient-to-br from-[#00FF9C] to-[#00D68F] flex items-center justify-center shadow-lg shadow-[#00FF9C]/20">
149
- <span className="text-black font-bold text-lg">F</span>
150
- </div>
151
- <span className="font-bold text-lg">FlexiReact</span>
152
- <span className="px-2 py-0.5 text-xs bg-[#00FF9C]/20 text-[#00FF9C] rounded-full">v3.0</span>
153
- </a>
154
-
155
- <div className="hidden md:flex items-center gap-8">
156
- <a href="https://github.com/flexireact/flexireact#readme" className="text-sm text-gray-400 hover:text-white transition-colors">Docs</a>
157
- <a href="https://github.com/flexireact/flexireact" className="text-sm text-gray-400 hover:text-white transition-colors">GitHub</a>
158
- <a href="https://github.com/flexireact/flexireact/tree/main/examples" className="text-sm text-gray-400 hover:text-white transition-colors">Examples</a>
159
- <a href="https://discord.gg/rFSZxFtpAA" className="text-sm text-gray-400 hover:text-white transition-colors">Discord</a>
160
- </div>
143
+ <div className="flex items-center justify-center min-h-screen px-4">
144
+ <div className="max-w-4xl mx-auto text-center space-y-8">
145
+ {/* Badge */}
146
+ <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-white/5 border border-white/10 text-sm">
147
+ <span className="relative flex h-2 w-2">
148
+ <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-[#00FF9C] opacity-75"></span>
149
+ <span className="relative inline-flex rounded-full h-2 w-2 bg-[#00FF9C]"></span>
150
+ </span>
151
+ <span className="text-gray-400">Introducing FlexiReact v4.0</span>
152
+ </div>
153
+
154
+ {/* Heading */}
155
+ <h1 className="text-5xl md:text-7xl font-bold tracking-tight">
156
+ The React Framework
157
+ <br />
158
+ <span className="bg-gradient-to-r from-[#00FF9C] via-[#00D68F] to-[#00FF9C] bg-clip-text text-transparent">
159
+ for the Web
160
+ </span>
161
+ </h1>
162
+
163
+ {/* Description */}
164
+ <p className="text-xl text-gray-400 max-w-2xl mx-auto leading-relaxed">
165
+ FlexiReact enables you to create full-stack web applications with TypeScript, Tailwind CSS, and modern tooling.
166
+ </p>
161
167
 
168
+ {/* CTA Buttons */}
169
+ <div className="flex flex-col sm:flex-row gap-4 justify-center pt-4">
162
170
  <a
163
- href="https://github.com/flexireact/flexireact"
164
- target="_blank"
165
- className="group flex items-center gap-2 px-4 py-2 bg-white/5 hover:bg-white/10 border border-white/10 hover:border-[#00FF9C]/50 rounded-lg transition-all"
171
+ href="https://github.com/flexireact/flexireact"
172
+ className="inline-flex items-center justify-center px-8 py-3 bg-white text-black font-medium rounded-lg hover:bg-gray-100 transition-colors"
166
173
  >
167
- <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
168
- <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
169
- </svg>
170
- <span className="text-sm font-medium">Star</span>
174
+ Get Started
175
+ </a>
176
+ <a
177
+ href="https://github.com/flexireact/flexireact#readme"
178
+ className="inline-flex items-center justify-center px-8 py-3 bg-white/10 text-white font-medium rounded-lg border border-white/10 hover:bg-white/20 transition-colors"
179
+ >
180
+ Learn More
171
181
  </a>
172
- </nav>
173
- </header>
174
-
175
- <main className="pt-16">
176
- {/* Hero Section */}
177
- <section className="relative py-24 lg:py-32 px-4 overflow-hidden animate-fade-in-up">
178
- {/* Gradient background */}
179
- <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_top,_var(--tw-gradient-stops))] from-[#00FF9C]/10 via-transparent to-transparent" />
180
- <div className="absolute top-0 left-1/2 -translate-x-1/2 w-[600px] h-[600px] bg-[#00FF9C]/5 rounded-full blur-[120px]" />
181
-
182
- <div className="relative max-w-5xl mx-auto text-center">
183
- {/* Logo */}
184
- <div className="inline-flex items-center justify-center w-20 h-20 mb-8 rounded-2xl bg-gradient-to-br from-[#00FF9C] to-[#00D68F] shadow-lg shadow-[#00FF9C]/20">
185
- <span className="text-3xl font-black text-black">F</span>
186
- </div>
187
-
188
- {/* Badge */}
189
- <div className="inline-flex items-center gap-2 px-4 py-2 mb-8 rounded-full bg-white/5 border border-white/10 backdrop-blur-sm">
190
- <span className="w-2 h-2 rounded-full bg-[#00FF9C] animate-pulse" />
191
- <span className="text-sm text-gray-300">v3.0 — The Future of React</span>
192
- </div>
193
-
194
- <h1 className="text-5xl sm:text-6xl lg:text-7xl font-bold mb-6 tracking-tight">
195
- Build faster with
196
- <span className="block mt-2 bg-gradient-to-r from-[#00FF9C] via-[#00D68F] to-[#00FF9C] bg-clip-text text-transparent">
197
- FlexiReact
198
- </span>
199
- </h1>
200
-
201
- <p className="text-lg sm:text-xl text-gray-400 mb-10 max-w-2xl mx-auto leading-relaxed">
202
- The modern React framework with TypeScript, Tailwind, SSR, Islands,
203
- Edge Runtime, and 50+ UI components. <span className="text-white font-medium">Better than Next.js.</span>
204
- </p>
205
-
206
- {/* CTA Buttons */}
207
- <div className="flex flex-col sm:flex-row gap-4 justify-center">
208
- <a href="https://github.com/flexireact/flexireact"
209
- className="group inline-flex items-center justify-center gap-2 px-8 py-4 bg-[#00FF9C] text-black font-semibold rounded-xl hover:bg-[#00D68F] transition-all hover:scale-105 hover:shadow-lg hover:shadow-[#00FF9C]/25">
210
- Get Started
211
- <svg className="w-5 h-5 transition-transform group-hover:translate-x-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
212
- <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 8l4 4m0 0l-4 4m4-4H3" />
213
- </svg>
214
- </a>
215
- <a href="https://github.com/flexireact/flexireact#readme"
216
- className="inline-flex items-center justify-center gap-2 px-8 py-4 bg-white/5 text-white font-semibold rounded-xl border border-white/10 hover:bg-white/10 hover:border-[#00FF9C]/50 transition-all">
217
- Documentation
218
- </a>
219
- </div>
220
-
221
- {/* Terminal */}
222
- <div className="mt-16 max-w-lg mx-auto">
223
- <div className="rounded-xl bg-[#111] border border-gray-800 overflow-hidden shadow-2xl">
224
- <div className="flex items-center gap-2 px-4 py-3 bg-[#0d0d0d] border-b border-gray-800">
225
- <div className="flex gap-1.5">
226
- <div className="w-3 h-3 rounded-full bg-red-500/80" />
227
- <div className="w-3 h-3 rounded-full bg-yellow-500/80" />
228
- <div className="w-3 h-3 rounded-full bg-green-500/80" />
229
- </div>
230
- <span className="text-xs text-gray-500 ml-2">Terminal</span>
231
- </div>
232
- <div className="p-4 font-mono text-sm">
233
- <div className="flex items-center gap-2">
234
- <span className="text-[#00FF9C]">$</span>
235
- <span className="text-gray-300">npx create-flexireact my-app</span>
236
- </div>
237
- </div>
238
- </div>
239
- </div>
240
- </div>
241
- </section>
242
-
243
- {/* Stats */}
244
- <section className="py-16 px-4 border-y border-gray-800/50">
245
- <div className="max-w-5xl mx-auto">
246
- <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
247
- {stats.map((stat, i) => (
248
- <div key={i} className="text-center p-6 rounded-2xl bg-gradient-to-b from-white/5 to-transparent border border-white/5">
249
- <div className="text-3xl sm:text-4xl font-bold text-[#00FF9C] mb-1">{stat.value}</div>
250
- <div className="text-sm text-gray-500">{stat.label}</div>
251
- </div>
252
- ))}
253
- </div>
254
182
  </div>
255
- </section>
256
183
 
257
- {/* Core Features Premium */}
258
- <section className="py-24 px-4 animate-fade-in-up animate-delay-100">
259
- <div className="max-w-7xl mx-auto">
260
- <div className="text-center mb-16">
261
- <h2 className="text-3xl sm:text-4xl font-bold mb-4">Core Features</h2>
262
- <p className="text-gray-400">Everything you need to build modern web apps</p>
263
- </div>
264
-
265
- <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-4">
266
- {coreFeatures.map((f, i) => (
267
- <div key={i} className="group p-6 rounded-2xl bg-gradient-to-b from-white/5 to-transparent border border-white/5 hover:border-[#00FF9C]/30 transition-all hover:scale-[1.02] hover:shadow-lg hover:shadow-[#00FF9C]/10">
268
- <div className="w-12 h-12 rounded-xl bg-[#00FF9C]/10 flex items-center justify-center text-2xl mb-4 group-hover:scale-110 transition-transform">
269
- {f.icon}
270
- </div>
271
- <h3 className="font-semibold text-lg mb-2">{f.title}</h3>
272
- <p className="text-gray-400 text-sm leading-relaxed">{f.desc}</p>
184
+ {/* Terminal Preview */}
185
+ <div className="mt-12 max-w-2xl mx-auto">
186
+ <div className="rounded-lg border border-white/10 bg-black/50 backdrop-blur-sm overflow-hidden">
187
+ <div className="flex items-center gap-2 px-4 py-3 border-b border-white/10 bg-white/5">
188
+ <div className="flex gap-1.5">
189
+ <div className="w-3 h-3 rounded-full bg-red-500/60" />
190
+ <div className="w-3 h-3 rounded-full bg-yellow-500/60" />
191
+ <div className="w-3 h-3 rounded-full bg-green-500/60" />
273
192
  </div>
274
- ))}
275
- </div>
276
- </div>
277
- </section>
278
-
279
- {/* How it Works Timeline */}
280
- <section className="py-24 px-4 bg-white/[0.02] animate-fade-in-up animate-delay-200">
281
- <div className="max-w-6xl mx-auto">
282
- <div className="text-center mb-16">
283
- <h2 className="text-3xl sm:text-4xl font-bold mb-4">How it Works</h2>
284
- <p className="text-gray-400">From idea to production in 5 simple steps</p>
285
- </div>
286
-
287
- <div className="relative">
288
- <div className="hidden lg:block absolute top-1/2 left-0 right-0 h-0.5 bg-gradient-to-r from-transparent via-[#00FF9C]/20 to-transparent" />
289
-
290
- <div className="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-5 gap-8">
291
- {timeline.map((item, i) => (
292
- <div key={i} className="relative text-center">
293
- <div className="inline-flex items-center justify-center w-16 h-16 rounded-full bg-gradient-to-br from-[#00FF9C] to-[#00D68F] text-black font-bold text-xl mb-4 shadow-lg shadow-[#00FF9C]/20">
294
- {item.step}
295
- </div>
296
- <h3 className="font-semibold mb-2">{item.title}</h3>
297
- <p className="text-sm text-gray-400">{item.desc}</p>
298
- </div>
299
- ))}
300
- </div>
301
- </div>
302
- </div>
303
- </section>
304
-
305
- {/* Code Example */}
306
- <section className="py-24 px-4 animate-fade-in-up animate-delay-300">
307
- <div className="max-w-4xl mx-auto">
308
- <div className="text-center mb-12">
309
- <h2 className="text-3xl sm:text-4xl font-bold mb-4">Simple & Powerful</h2>
310
- <p className="text-gray-400">Write clean code that just works</p>
311
- </div>
312
-
313
- <div className="rounded-2xl bg-[#111] border border-gray-800 overflow-hidden">
314
- <div className="flex items-center gap-4 px-6 py-3 bg-[#0d0d0d] border-b border-gray-800">
315
- <button className="px-3 py-1.5 text-sm bg-[#00FF9C]/20 text-[#00FF9C] rounded-lg">Pages</button>
316
- <button className="px-3 py-1.5 text-sm text-gray-400 hover:text-white transition">API Route</button>
317
- <button className="px-3 py-1.5 text-sm text-gray-400 hover:text-white transition">Component</button>
318
193
  </div>
319
- <pre className="p-6 overflow-x-auto"><code className="text-sm text-gray-300">{\`// app/page.tsx
320
- export default function Home() {
321
- return (
322
- <div className="container mx-auto p-8">
323
- <h1 className="text-4xl font-bold">
324
- Hello from FlexiReact ⚡
325
- </h1>
326
- </div>
327
- );
328
- }\`}</code></pre>
329
- </div>
330
- </div>
331
- </section>
332
-
333
- {/* Benchmarks */}
334
- <section className="py-24 px-4 bg-white/[0.02] animate-fade-in-up animate-delay-400">
335
- <div className="max-w-4xl mx-auto">
336
- <div className="text-center mb-12">
337
- <h2 className="text-3xl sm:text-4xl font-bold mb-4">Blazing Fast Performance</h2>
338
- <p className="text-gray-400">Cold start comparison (lower is better)</p>
339
- </div>
340
-
341
- <div className="space-y-6">
342
- {benchmarks.map((bench, i) => (
343
- <div key={i} className="flex items-center gap-4">
344
- <div className="w-32 text-sm font-medium">{bench.name}</div>
345
- <div className="flex-1 h-12 bg-white/5 rounded-lg overflow-hidden">
346
- <div
347
- className="h-full flex items-center px-4 text-sm font-bold transition-all duration-1000"
348
- style={{
349
- width: \`\${(bench.time / 10) * 100}%\`,
350
- backgroundColor: bench.name === 'FlexiReact' ? '#00FF9C' : 'rgba(255,255,255,0.1)',
351
- color: bench.name === 'FlexiReact' ? '#000' : '#fff'
352
- }}
353
- >
354
- {bench.time}ms
355
- </div>
356
- </div>
357
- </div>
358
- ))}
359
- </div>
360
- </div>
361
- </section>
362
-
363
- {/* Why FlexiReact */}
364
- <section className="py-24 px-4">
365
- <div className="max-w-6xl mx-auto">
366
- <div className="text-center mb-16">
367
- <h2 className="text-3xl sm:text-4xl font-bold mb-4">Why FlexiReact?</h2>
368
- <p className="text-gray-400">Built for developers who value speed and simplicity</p>
369
- </div>
370
-
371
- <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
372
- {whyFlexiReact.map((item, i) => (
373
- <div key={i} className="p-6 rounded-2xl bg-gradient-to-b from-white/5 to-transparent border border-white/5">
374
- <div className="text-3xl mb-4">{item.icon}</div>
375
- <h3 className="font-semibold mb-2">{item.title}</h3>
376
- <p className="text-sm text-gray-400">{item.desc}</p>
377
- </div>
378
- ))}
379
- </div>
380
- </div>
381
- </section>
382
-
383
- {/* Ecosystem */}
384
- <section className="py-24 px-4 bg-white/[0.02]">
385
- <div className="max-w-6xl mx-auto">
386
- <div className="text-center mb-16">
387
- <h2 className="text-3xl sm:text-4xl font-bold mb-4">Complete Ecosystem</h2>
388
- <p className="text-gray-400">Everything you need, batteries included</p>
389
- </div>
390
-
391
- <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
392
- {ecosystem.map((item, i) => (
393
- <a key={i} href={item.link} target="_blank" className="group p-6 rounded-2xl bg-gradient-to-b from-white/5 to-transparent border border-white/5 hover:border-[#00FF9C]/30 transition-all hover:scale-105">
394
- <div className="text-4xl mb-4">{item.icon}</div>
395
- <h3 className="font-semibold mb-1 group-hover:text-[#00FF9C] transition">{item.name}</h3>
396
- <p className="text-sm text-gray-400">{item.desc}</p>
397
- </a>
398
- ))}
399
- </div>
400
- </div>
401
- </section>
402
-
403
- {/* Backed By */}
404
- <section className="py-24 px-4">
405
- <div className="max-w-6xl mx-auto">
406
- <div className="text-center mb-12">
407
- <h2 className="text-2xl font-bold mb-8 text-gray-500">Trusted By</h2>
408
- </div>
409
-
410
- <div className="flex flex-wrap items-center justify-center gap-12">
411
- {backedBy.map((company, i) => (
412
- <div key={i} className="group flex items-center gap-3 opacity-40 hover:opacity-100 transition-opacity">
413
- <div className="w-12 h-12 rounded-lg bg-white/5 flex items-center justify-center font-bold text-xl group-hover:bg-[#00FF9C]/20 group-hover:text-[#00FF9C] transition">
414
- {company.logo}
415
- </div>
416
- <span className="font-semibold">{company.name}</span>
417
- </div>
418
- ))}
419
- </div>
420
- </div>
421
- </section>
422
-
423
- {/* Final CTA */}
424
- <section className="py-24 px-4">
425
- <div className="max-w-3xl mx-auto">
426
- <div className="relative p-8 sm:p-12 rounded-3xl bg-gradient-to-b from-[#111] to-[#0a0a0a] border border-gray-800 overflow-hidden">
427
- <div className="absolute top-0 right-0 w-64 h-64 bg-[#00FF9C]/10 rounded-full blur-[100px]" />
428
- <div className="relative text-center">
429
- <h2 className="text-3xl sm:text-4xl font-bold mb-4">Ready to build?</h2>
430
- <p className="text-gray-400 mb-8">Create your first FlexiReact app in seconds</p>
431
-
432
- <div className="inline-block p-4 rounded-xl bg-black/50 border border-gray-800 font-mono text-sm mb-8">
433
- <span className="text-[#00FF9C]">$</span>
434
- <span className="text-gray-300 ml-2">npx create-flexireact my-app</span>
435
- </div>
436
-
437
- <div className="flex flex-col sm:flex-row gap-4 justify-center">
438
- <a href="https://github.com/flexireact/flexireact"
439
- className="inline-flex items-center justify-center gap-2 px-8 py-4 bg-[#00FF9C] text-black font-semibold rounded-xl hover:bg-[#00D68F] transition-all">
440
- Start Building →
441
- </a>
442
- </div>
194
+ <div className="p-6 font-mono text-sm">
195
+ <div className="text-gray-400">$ npx create-flexireact@latest</div>
443
196
  </div>
444
197
  </div>
445
198
  </div>
446
- </section>
447
199
 
448
- {/* Premium Footer */}
449
- <footer className="border-t border-gray-800/50 py-16 px-4">
450
- <div className="max-w-7xl mx-auto">
451
- <div className="grid grid-cols-2 md:grid-cols-4 gap-8 mb-12">
452
- <div>
453
- <h3 className="font-semibold mb-4">Product</h3>
454
- <ul className="space-y-2">
455
- <li><a href="https://github.com/flexireact/flexireact#readme" className="text-sm text-gray-400 hover:text-white transition">Docs</a></li>
456
- <li><a href="https://github.com/flexireact/flexireact/tree/main/examples" className="text-sm text-gray-400 hover:text-white transition">Examples</a></li>
457
- <li><a href="https://github.com/flexireact/flexireact/blob/main/CHANGELOG-v3.md" className="text-sm text-gray-400 hover:text-white transition">Changelog</a></li>
458
- <li><a href="https://github.com/flexireact/flexireact/projects" className="text-sm text-gray-400 hover:text-white transition">Roadmap</a></li>
459
- </ul>
200
+ {/* Features Grid */}
201
+ <div className="grid grid-cols-2 md:grid-cols-4 gap-4 pt-16 max-w-3xl mx-auto">
202
+ {[
203
+ { icon: '⚡', label: 'Fast Refresh' },
204
+ { icon: '📦', label: 'File Routing' },
205
+ { icon: '🎨', label: 'Tailwind CSS' },
206
+ { icon: '🔒', label: 'TypeScript' },
207
+ ].map((feature) => (
208
+ <div key={feature.label} className="flex flex-col items-center gap-2 p-4 rounded-lg border border-white/10 bg-white/5 hover:bg-white/10 transition-colors">
209
+ <span className="text-2xl">{feature.icon}</span>
210
+ <span className="text-sm font-medium">{feature.label}</span>
460
211
  </div>
461
- <div>
462
- <h3 className="font-semibold mb-4">Community</h3>
463
- <ul className="space-y-2">
464
- <li><a href="https://github.com/flexireact/flexireact" className="text-sm text-gray-400 hover:text-white transition">GitHub</a></li>
465
- <li><a href="https://discord.gg/rFSZxFtpAA" className="text-sm text-gray-400 hover:text-white transition">Discord</a></li>
466
- <li><a href="https://github.com/flexireact/flexireact/discussions" className="text-sm text-gray-400 hover:text-white transition">Discussions</a></li>
467
- </ul>
468
- </div>
469
- <div>
470
- <h3 className="font-semibold mb-4">Ecosystem</h3>
471
- <ul className="space-y-2">
472
- <li><a href="https://www.npmjs.com/package/@flexireact/flexi-ui" className="text-sm text-gray-400 hover:text-white transition">FlexiUI</a></li>
473
- <li><a href="https://www.npmjs.com/package/flexiguard" className="text-sm text-gray-400 hover:text-white transition">FlexiGuard</a></li>
474
- <li><a href="https://www.npmjs.com/package/create-flexireact" className="text-sm text-gray-400 hover:text-white transition">CLI</a></li>
475
- </ul>
476
- </div>
477
- <div>
478
- <h3 className="font-semibold mb-4">Legal</h3>
479
- <ul className="space-y-2">
480
- <li><a href="https://github.com/flexireact/flexireact/blob/main/LICENSE" className="text-sm text-gray-400 hover:text-white transition">License</a></li>
481
- <li><a href="https://github.com/flexireact/flexireact/blob/main/CONTRIBUTING.md" className="text-sm text-gray-400 hover:text-white transition">Contributing</a></li>
482
- </ul>
483
- </div>
484
- </div>
485
-
486
- <div className="pt-8 border-t border-gray-800/50 flex flex-col md:flex-row items-center justify-between gap-4">
487
- <div className="flex items-center gap-2">
488
- <div className="w-8 h-8 rounded-lg bg-[#00FF9C] flex items-center justify-center">
489
- <span className="text-black font-bold">F</span>
490
- </div>
491
- <span className="text-sm text-gray-400">Built with ❤️ by Asuno</span>
492
- </div>
493
- <p className="text-sm text-gray-500">© {new Date().getFullYear()} FlexiReact. MIT License.</p>
494
- </div>
212
+ ))}
495
213
  </div>
496
- </footer>
497
- </main>
214
+ </div>
498
215
  </div>
499
216
  );
500
217
  }
@@ -503,10 +220,10 @@ export default function Home() {
503
220
 
504
221
  export default function Loading() {
505
222
  return (
506
- <div className="min-h-screen flex items-center justify-center bg-[#0a0a0a]">
223
+ <div className="min-h-screen flex items-center justify-center">
507
224
  <div className="flex flex-col items-center gap-4">
508
- <div className="w-12 h-12 border-4 border-[#00FF9C]/20 border-t-[#00FF9C] rounded-full animate-spin" />
509
- <span className="text-gray-400 text-sm">Loading...</span>
225
+ <div className="w-12 h-12 border-4 border-primary/20 border-t-primary rounded-full animate-spin" />
226
+ <span className="text-muted text-sm">Loading...</span>
510
227
  </div>
511
228
  </div>
512
229
  );
@@ -518,7 +235,7 @@ import React from 'react';
518
235
 
519
236
  export default function Error({ error, reset }: { error: Error; reset: () => void }) {
520
237
  return (
521
- <div className="min-h-screen flex flex-col items-center justify-center p-8 bg-[#0a0a0a]">
238
+ <div className="min-h-screen flex flex-col items-center justify-center p-8">
522
239
  <div className="max-w-md w-full p-6 rounded-2xl bg-red-500/10 border border-red-500/20 mb-8">
523
240
  <div className="flex items-center gap-3 mb-4">
524
241
  <div className="w-10 h-10 rounded-full bg-red-500/20 flex items-center justify-center">
@@ -526,11 +243,11 @@ export default function Error({ error, reset }: { error: Error; reset: () => voi
526
243
  </div>
527
244
  <h2 className="font-bold text-lg text-red-400">Something went wrong</h2>
528
245
  </div>
529
- <p className="text-gray-400 text-sm">{error.message}</p>
246
+ <p className="text-muted text-sm">{error.message}</p>
530
247
  </div>
531
248
  <button
532
249
  onClick={reset}
533
- className="px-6 py-3 bg-[#00FF9C] text-black font-semibold rounded-xl hover:bg-[#00D68F] transition-all"
250
+ className="px-6 py-3 bg-white text-black font-semibold rounded-lg hover:bg-gray-100 transition-all"
534
251
  >
535
252
  Try again
536
253
  </button>
@@ -542,15 +259,15 @@ export default function Error({ error, reset }: { error: Error; reset: () => voi
542
259
 
543
260
  export default function NotFound() {
544
261
  return (
545
- <div className="min-h-screen flex flex-col items-center justify-center p-8 bg-[#0a0a0a]">
262
+ <div className="min-h-screen flex flex-col items-center justify-center p-8">
546
263
  <div className="text-center">
547
- <h1 className="text-[150px] font-bold leading-none bg-gradient-to-b from-[#00FF9C] to-[#00FF9C]/20 bg-clip-text text-transparent">
264
+ <h1 className="text-[150px] font-bold leading-none bg-gradient-to-b from-primary to-primary/20 bg-clip-text text-transparent">
548
265
  404
549
266
  </h1>
550
- <p className="text-gray-400 text-xl mb-8 -mt-4">Page not found</p>
267
+ <p className="text-muted text-xl mb-8 -mt-4">Page not found</p>
551
268
  <a
552
269
  href="/"
553
- className="inline-flex items-center gap-2 px-6 py-3 bg-[#00FF9C] text-black font-semibold rounded-xl hover:bg-[#00D68F] transition-all"
270
+ className="inline-flex items-center gap-2 px-6 py-3 bg-white text-black font-semibold rounded-lg hover:bg-gray-100 transition-all"
554
271
  >
555
272
  ← Back Home
556
273
  </a>
@@ -571,42 +288,6 @@ export default function NotFound() {
571
288
  body {
572
289
  font-family: var(--font-sans);
573
290
  }
574
-
575
- /* Fade-in and slide-up animations */
576
- @keyframes fadeInUp {
577
- from {
578
- opacity: 0;
579
- transform: translateY(30px);
580
- }
581
- to {
582
- opacity: 1;
583
- transform: translateY(0);
584
- }
585
- }
586
-
587
- .animate-fade-in-up {
588
- animation: fadeInUp 0.6s ease-out forwards;
589
- }
590
-
591
- .animate-delay-100 {
592
- animation-delay: 0.1s;
593
- opacity: 0;
594
- }
595
-
596
- .animate-delay-200 {
597
- animation-delay: 0.2s;
598
- opacity: 0;
599
- }
600
-
601
- .animate-delay-300 {
602
- animation-delay: 0.3s;
603
- opacity: 0;
604
- }
605
-
606
- .animate-delay-400 {
607
- animation-delay: 0.4s;
608
- opacity: 0;
609
- }
610
291
  `,
611
292
  // Lib
612
293
  'lib/utils.ts': `import { clsx, type ClassValue } from 'clsx';
@@ -1 +1 @@
1
- {"version":3,"file":"app-router.js","sourceRoot":"","sources":["../../src/templates/app-router.ts"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"app-router.js","sourceRoot":"","sources":["../../src/templates/app-router.ts"],"names":[],"mappings":"AAAA;;GAEG;AAIH,MAAM,UAAU,iBAAiB,CAAC,WAAmB;IACnD,OAAO;QACL,cAAc,EAAE,IAAI,CAAC,SAAS,CAAC;YAC7B,IAAI,EAAE,WAAW;YACjB,OAAO,EAAE,OAAO;YAChB,OAAO,EAAE,IAAI;YACb,IAAI,EAAE,QAAQ;YACd,OAAO,EAAE;gBACP,GAAG,EAAE,+BAA+B;gBACpC,KAAK,EAAE,iCAAiC;gBACxC,KAAK,EAAE,kBAAkB;gBACzB,GAAG,EAAE,kEAAkE;aACxE;YACD,YAAY,EAAE;gBACZ,KAAK,EAAE,SAAS;gBAChB,WAAW,EAAE,SAAS;gBACtB,kBAAkB,EAAE,QAAQ;gBAC5B,sBAAsB,EAAE,QAAQ;gBAChC,IAAI,EAAE,QAAQ;gBACd,gBAAgB,EAAE,QAAQ;aAC3B;YACD,eAAe,EAAE;gBACf,cAAc,EAAE,SAAS;gBACzB,kBAAkB,EAAE,SAAS;gBAC7B,UAAU,EAAE,QAAQ;gBACpB,WAAW,EAAE,QAAQ;gBACrB,kBAAkB,EAAE,QAAQ;gBAC5B,sBAAsB,EAAE,QAAQ;aACjC;SACF,EAAE,IAAI,EAAE,CAAC,CAAC;QAEX,eAAe,EAAE,IAAI,CAAC,SAAS,CAAC;YAC9B,eAAe,EAAE;gBACf,MAAM,EAAE,QAAQ;gBAChB,GAAG,EAAE,CAAC,KAAK,EAAE,cAAc,EAAE,QAAQ,CAAC;gBACtC,MAAM,EAAE,QAAQ;gBAChB,gBAAgB,EAAE,SAAS;gBAC3B,GAAG,EAAE,WAAW;gBAChB,MAAM,EAAE,IAAI;gBACZ,YAAY,EAAE,IAAI;gBAClB,eAAe,EAAE,IAAI;gBACrB,iBAAiB,EAAE,IAAI;gBACvB,eAAe,EAAE,IAAI;gBACrB,MAAM,EAAE,IAAI;gBACZ,OAAO,EAAE,GAAG;gBACZ,KAAK,EAAE;oBACL,KAAK,EAAE,CAAC,KAAK,CAAC;iBACf;aACF;YACD,OAAO,EAAE,CAAC,SAAS,EAAE,UAAU,CAAC;YAChC,OAAO,EAAE,CAAC,cAAc,EAAE,QAAQ,EAAE,QAAQ,CAAC;SAC9C,EAAE,IAAI,EAAE,CAAC,CAAC;QAEX,mBAAmB,EAAE;;;;;CAKxB;QAEG,sBAAsB,EAAE;;;;CAI3B;QAEG,gBAAgB;QAChB,gBAAgB,EAAE;;;;;;;;;;;;;;;;;;CAkBrB;QAEG,cAAc,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoInB;QAEG,iBAAiB,EAAE;;;;;;;;;;;;CAYtB;QAEG,eAAe,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;CAyBpB;QAEG,mBAAmB,EAAE;;;;;;;;;;;;;;;;;;;;CAoBxB;QAEG,iBAAiB,EAAE;;;;;;;;;;;;CAYtB;QAEG,MAAM;QACN,cAAc,EAAE;;;;;;CAMnB;QAEG,SAAS;QACT,oBAAoB,EAAE;;;;;;;;;OASnB;QAEH,iBAAiB,EAAE,EAAE;QAErB,YAAY,EAAE;;;;;;;CAOjB;KACE,CAAC;AACJ,CAAC"}
@@ -1,9 +1,9 @@
1
1
  /**
2
- * Default Template - Full-featured FlexiReact v3 setup
2
+ * Default Template - Full-featured FlexiReact v4 setup
3
3
  *
4
4
  * Structure:
5
5
  * - app/ : Layout, components, styles, providers
6
- * - routes/ : FlexiReact v3 file-based routing
6
+ * - routes/ : FlexiReact v4 file-based routing
7
7
  * - lib/ : Utilities
8
8
  * - public/ : Static assets
9
9
  */
@@ -1 +1 @@
1
- {"version":3,"file":"default.d.ts","sourceRoot":"","sources":["../../src/templates/default.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAEhD,wBAAgB,eAAe,CAAC,WAAW,EAAE,MAAM,GAAG,aAAa,CAy2BlE"}
1
+ {"version":3,"file":"default.d.ts","sourceRoot":"","sources":["../../src/templates/default.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAEhD,wBAAgB,eAAe,CAAC,WAAW,EAAE,MAAM,GAAG,aAAa,CAioBlE"}
@@ -1,9 +1,9 @@
1
1
  /**
2
- * Default Template - Full-featured FlexiReact v3 setup
2
+ * Default Template - Full-featured FlexiReact v4 setup
3
3
  *
4
4
  * Structure:
5
5
  * - app/ : Layout, components, styles, providers
6
- * - routes/ : FlexiReact v3 file-based routing
6
+ * - routes/ : FlexiReact v4 file-based routing
7
7
  * - lib/ : Utilities
8
8
  * - public/ : Static assets
9
9
  */
@@ -232,7 +232,7 @@ export function Footer() {
232
232
  return (
233
233
  <footer className="border-t border-border py-8 mt-auto">
234
234
  <div className="container mx-auto px-4 text-center text-sm text-muted max-w-6xl">
235
- <p>Built with FlexiReact v3 • {new Date().getFullYear()}</p>
235
+ <p>Built with FlexiReact v4 • {new Date().getFullYear()}</p>
236
236
  <p className="mt-2">
237
237
  <a href="https://discord.gg/rFSZxFtpAA" target="_blank" rel="noopener noreferrer" className="text-primary hover:underline">
238
238
  Join our Discord Community 💬
@@ -294,7 +294,7 @@ export function useTheme() {
294
294
  // Styles
295
295
  'app/styles/globals.css': `@import "tailwindcss";
296
296
 
297
- /* FlexiReact v3 Theme */
297
+ /* FlexiReact v4 Theme */
298
298
  @theme {
299
299
  /* Colors */
300
300
  --color-background: #0a0a0a;
@@ -358,316 +358,84 @@ body {
358
358
  }
359
359
  `,
360
360
  // ========================================================================
361
- // Routes Directory - FlexiReact v3 Routing
361
+ // Routes Directory - FlexiReact v4 Routing
362
362
  // ========================================================================
363
363
  'routes/(public)/home.tsx': `import React from 'react';
364
+ import { Button } from '@/app/components/ui';
364
365
 
365
366
  export const metadata = {
366
- title: 'FlexiReact v3 - The Modern React Framework',
367
- description: 'Build fast, modern web apps with FlexiReact v3',
367
+ title: 'FlexiReact v4 - The Modern React Framework',
368
+ description: 'Build fast, modern web apps with FlexiReact v4',
368
369
  };
369
370
 
370
- const coreFeatures = [
371
- { icon: '⚡', title: '2ms Cold Start', desc: 'Edge runtime with instant response times' },
372
- { icon: '🧩', title: '50+ UI Components', desc: 'FlexiUI ready to use out of the box' },
373
- { icon: '🛡️', title: 'Middleware Auth', desc: 'FlexiGuard powered authentication' },
374
- { icon: '🔥', title: 'Zero-config Dev', desc: 'Start coding immediately, no setup' },
375
- { icon: '💽', title: 'File-based API', desc: 'Intuitive API routes structure' },
376
- { icon: '🏝️', title: 'Islands Architecture', desc: 'Partial hydration for max performance' },
377
- { icon: '📘', title: 'TypeScript First', desc: 'Full type safety out of the box' },
378
- { icon: '🎨', title: 'Tailwind v4', desc: 'Latest CSS framework integrated' },
379
- { icon: '🚀', title: 'SSR + PPR', desc: 'Streaming SSR & Partial Prerendering' },
380
- ];
381
-
382
- const timeline = [
383
- { step: '1', title: 'File Routing', desc: 'Create pages in routes/ directory' },
384
- { step: '2', title: 'Layouts', desc: 'Shared UI across routes' },
385
- { step: '3', title: 'Islands', desc: 'Interactive components' },
386
- { step: '4', title: 'SSR/SSG', desc: 'Server or static rendering' },
387
- { step: '5', title: 'Deploy', desc: 'Ship to Edge in seconds' },
388
- ];
389
-
390
- const benchmarks = [
391
- { name: 'FlexiReact', time: 2 },
392
- { name: 'Astro', time: 5 },
393
- { name: 'Next.js', time: 8 },
394
- ];
395
-
396
- const ecosystem = [
397
- { icon: '⚛️', name: 'FlexiUI', desc: '50+ components' },
398
- { icon: '🔐', name: 'FlexiGuard', desc: 'Auth & RBAC' },
399
- { icon: '🧰', name: 'FlexiCLI', desc: 'Commands & scaffolding' },
400
- { icon: '🌐', name: 'FlexiEdge', desc: 'Deploy-ready runtime' },
401
- ];
402
-
403
- const whyFlexiReact = [
404
- { icon: '🚀', title: 'Ultra-fast dev experience', desc: 'Sub-second builds with esbuild' },
405
- { icon: '🏝️', title: 'Islands with zero config', desc: 'Automatic partial hydration' },
406
- { icon: '🧩', title: 'UI components included', desc: 'FlexiUI with 50+ components' },
407
- { icon: '🔐', title: 'Authentication included', desc: 'FlexiGuard for auth & RBAC' },
408
- ];
409
-
410
- const backedBy = [
411
- { name: 'Velcarius', logo: 'V' },
412
- { name: 'Rayze Sol Energy', logo: 'R' },
413
- { name: 'FramLink', logo: 'F' },
414
- ];
415
-
416
371
  export default function HomePage() {
417
372
  return (
418
- <div className="min-h-screen">
419
- {/* Hero Section */}
420
- <section className="relative py-24 lg:py-32 px-4 overflow-hidden animate-fade-in-up">
421
- <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_top,_var(--tw-gradient-stops))] from-[#00FF9C]/10 via-transparent to-transparent" />
422
- <div className="absolute top-0 left-1/2 -translate-x-1/2 w-[600px] h-[600px] bg-[#00FF9C]/5 rounded-full blur-[120px]" />
423
-
424
- <div className="relative max-w-5xl mx-auto text-center">
425
- <div className="inline-flex items-center justify-center w-20 h-20 mb-8 rounded-2xl bg-gradient-to-br from-[#00FF9C] to-[#00D68F] shadow-lg shadow-[#00FF9C]/20">
426
- <span className="text-3xl font-black text-black">F</span>
427
- </div>
428
-
429
- <div className="inline-flex items-center gap-2 px-4 py-2 mb-8 rounded-full bg-white/5 border border-white/10 backdrop-blur-sm">
430
- <span className="w-2 h-2 rounded-full bg-[#00FF9C] animate-pulse" />
431
- <span className="text-sm text-gray-300">v3.0 — The Future of React</span>
432
- </div>
433
-
434
- <h1 className="text-5xl sm:text-6xl lg:text-7xl font-bold mb-6 tracking-tight">
435
- Build faster with
436
- <span className="block mt-2 bg-gradient-to-r from-[#00FF9C] via-[#00D68F] to-[#00FF9C] bg-clip-text text-transparent">
437
- FlexiReact
438
- </span>
439
- </h1>
440
-
441
- <p className="text-lg sm:text-xl text-gray-400 mb-10 max-w-2xl mx-auto leading-relaxed">
442
- The modern React framework with TypeScript, Tailwind, SSR, Islands,
443
- Edge Runtime, and 50+ UI components. <span className="text-white font-medium">Better than Next.js.</span>
444
- </p>
445
-
446
- <div className="flex flex-col sm:flex-row gap-4 justify-center mb-16">
447
- <a href="https://github.com/flexireact/flexireact"
448
- className="group inline-flex items-center justify-center gap-2 px-8 py-4 bg-[#00FF9C] text-black font-semibold rounded-xl hover:bg-[#00D68F] transition-all hover:scale-105 hover:shadow-lg hover:shadow-[#00FF9C]/25">
449
- Get Started
450
- <svg className="w-5 h-5 transition-transform group-hover:translate-x-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
451
- <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 8l4 4m0 0l-4 4m4-4H3" />
452
- </svg>
453
- </a>
454
- <a href="https://github.com/flexireact/flexireact#readme"
455
- className="inline-flex items-center justify-center gap-2 px-8 py-4 bg-white/5 text-white font-semibold rounded-xl border border-white/10 hover:bg-white/10 hover:border-[#00FF9C]/50 transition-all">
456
- Documentation
457
- </a>
458
- </div>
373
+ <div className="flex flex-col items-center justify-center min-h-[calc(100vh-8rem)] px-4">
374
+ <div className="max-w-4xl mx-auto text-center space-y-8">
375
+ {/* Badge */}
376
+ <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-white/5 border border-white/10 text-sm">
377
+ <span className="relative flex h-2 w-2">
378
+ <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-primary opacity-75"></span>
379
+ <span className="relative inline-flex rounded-full h-2 w-2 bg-primary"></span>
380
+ </span>
381
+ <span className="text-muted">Introducing FlexiReact v4.0</span>
382
+ </div>
459
383
 
460
- <div className="max-w-lg mx-auto">
461
- <div className="rounded-xl bg-[#111] border border-gray-800 overflow-hidden shadow-2xl">
462
- <div className="flex items-center gap-2 px-4 py-3 bg-[#0d0d0d] border-b border-gray-800">
463
- <div className="flex gap-1.5">
464
- <div className="w-3 h-3 rounded-full bg-red-500/80" />
465
- <div className="w-3 h-3 rounded-full bg-yellow-500/80" />
466
- <div className="w-3 h-3 rounded-full bg-green-500/80" />
467
- </div>
468
- <span className="text-xs text-gray-500 ml-2">Terminal</span>
469
- </div>
470
- <div className="p-4 font-mono text-sm">
471
- <div className="flex items-center gap-2">
472
- <span className="text-[#00FF9C]">$</span>
473
- <span className="text-gray-300">npx create-flexireact my-app</span>
474
- </div>
475
- </div>
476
- </div>
477
- </div>
384
+ {/* Heading */}
385
+ <h1 className="text-5xl md:text-7xl font-bold tracking-tight">
386
+ The React Framework
387
+ <br />
388
+ <span className="bg-gradient-to-r from-primary via-primary/80 to-primary bg-clip-text text-transparent">
389
+ for the Web
390
+ </span>
391
+ </h1>
392
+
393
+ {/* Description */}
394
+ <p className="text-xl text-muted max-w-2xl mx-auto leading-relaxed">
395
+ FlexiReact enables you to create full-stack web applications with TypeScript, Tailwind CSS, and modern tooling.
396
+ </p>
397
+
398
+ {/* CTA Buttons */}
399
+ <div className="flex flex-col sm:flex-row gap-4 justify-center pt-4">
400
+ <Button size="lg" className="text-base">
401
+ Get Started →
402
+ </Button>
403
+ <Button variant="outline" size="lg" className="text-base">
404
+ Learn More
405
+ </Button>
478
406
  </div>
479
- </section>
480
-
481
- {/* Core Features Premium */}
482
- <section className="py-24 px-4 animate-fade-in-up animate-delay-100">
483
- <div className="max-w-7xl mx-auto">
484
- <div className="text-center mb-16">
485
- <h2 className="text-3xl sm:text-4xl font-bold mb-4">Core Features</h2>
486
- <p className="text-gray-400">Everything you need to build modern web apps</p>
487
- </div>
488
-
489
- <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-4">
490
- {coreFeatures.map((f, i) => (
491
- <div key={i} className="group p-6 rounded-2xl bg-gradient-to-b from-white/5 to-transparent border border-white/5 hover:border-[#00FF9C]/30 transition-all hover:scale-[1.02] hover:shadow-lg hover:shadow-[#00FF9C]/10">
492
- <div className="w-12 h-12 rounded-xl bg-[#00FF9C]/10 flex items-center justify-center text-2xl mb-4 group-hover:scale-110 transition-transform">
493
- {f.icon}
494
- </div>
495
- <h3 className="font-semibold text-lg mb-2">{f.title}</h3>
496
- <p className="text-gray-400 text-sm leading-relaxed">{f.desc}</p>
407
+
408
+ {/* Terminal Preview */}
409
+ <div className="mt-12 max-w-2xl mx-auto">
410
+ <div className="rounded-lg border border-border bg-background/50 backdrop-blur-sm overflow-hidden">
411
+ <div className="flex items-center gap-2 px-4 py-3 border-b border-border bg-white/5">
412
+ <div className="flex gap-1.5">
413
+ <div className="w-3 h-3 rounded-full bg-red-500/60" />
414
+ <div className="w-3 h-3 rounded-full bg-yellow-500/60" />
415
+ <div className="w-3 h-3 rounded-full bg-green-500/60" />
497
416
  </div>
498
- ))}
499
- </div>
500
- </div>
501
- </section>
502
-
503
- {/* How it Works Timeline */}
504
- <section className="py-24 px-4 bg-white/[0.02] animate-fade-in-up animate-delay-200">
505
- <div className="max-w-6xl mx-auto">
506
- <div className="text-center mb-16">
507
- <h2 className="text-3xl sm:text-4xl font-bold mb-4">How it Works</h2>
508
- <p className="text-gray-400">From idea to production in 5 simple steps</p>
509
- </div>
510
-
511
- <div className="relative">
512
- <div className="hidden lg:block absolute top-1/2 left-0 right-0 h-0.5 bg-gradient-to-r from-transparent via-[#00FF9C]/20 to-transparent" />
513
-
514
- <div className="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-5 gap-8">
515
- {timeline.map((item, i) => (
516
- <div key={i} className="relative text-center">
517
- <div className="inline-flex items-center justify-center w-16 h-16 rounded-full bg-gradient-to-br from-[#00FF9C] to-[#00D68F] text-black font-bold text-xl mb-4 shadow-lg shadow-[#00FF9C]/20">
518
- {item.step}
519
- </div>
520
- <h3 className="font-semibold mb-2">{item.title}</h3>
521
- <p className="text-sm text-gray-400">{item.desc}</p>
522
- </div>
523
- ))}
524
417
  </div>
525
- </div>
526
- </div>
527
- </section>
528
-
529
- {/* Code Example */}
530
- <section className="py-24 px-4 animate-fade-in-up animate-delay-300">
531
- <div className="max-w-4xl mx-auto">
532
- <div className="text-center mb-12">
533
- <h2 className="text-3xl sm:text-4xl font-bold mb-4">Simple & Powerful</h2>
534
- <p className="text-gray-400">Write clean code that just works</p>
535
- </div>
536
-
537
- <div className="rounded-2xl bg-[#111] border border-gray-800 overflow-hidden">
538
- <div className="flex items-center gap-4 px-6 py-3 bg-[#0d0d0d] border-b border-gray-800">
539
- <button className="px-3 py-1.5 text-sm bg-[#00FF9C]/20 text-[#00FF9C] rounded-lg">Pages</button>
540
- <button className="px-3 py-1.5 text-sm text-gray-400 hover:text-white transition">API Route</button>
541
- <button className="px-3 py-1.5 text-sm text-gray-400 hover:text-white transition">Component</button>
418
+ <div className="p-6 font-mono text-sm">
419
+ <div className="text-muted">$ npx create-flexireact@latest</div>
542
420
  </div>
543
- <pre className="p-6 overflow-x-auto"><code className="text-sm text-gray-300">{\`// routes/home.tsx
544
- export default function Home() {
545
- return (
546
- <div className="container mx-auto p-8">
547
- <h1 className="text-4xl font-bold">
548
- Hello from FlexiReact ⚡
549
- </h1>
550
- </div>
551
- );
552
- }\`}</code></pre>
553
- </div>
554
- </div>
555
- </section>
556
-
557
- {/* Benchmarks */}
558
- <section className="py-24 px-4 bg-white/[0.02] animate-fade-in-up animate-delay-400">
559
- <div className="max-w-4xl mx-auto">
560
- <div className="text-center mb-12">
561
- <h2 className="text-3xl sm:text-4xl font-bold mb-4">Blazing Fast Performance</h2>
562
- <p className="text-gray-400">Cold start comparison (lower is better)</p>
563
- </div>
564
-
565
- <div className="space-y-6">
566
- {benchmarks.map((bench, i) => (
567
- <div key={i} className="flex items-center gap-4">
568
- <div className="w-32 text-sm font-medium">{bench.name}</div>
569
- <div className="flex-1 h-12 bg-white/5 rounded-lg overflow-hidden">
570
- <div
571
- className="h-full flex items-center px-4 text-sm font-bold transition-all duration-1000"
572
- style={{
573
- width: \`\${(bench.time / 10) * 100}%\`,
574
- backgroundColor: bench.name === 'FlexiReact' ? '#00FF9C' : 'rgba(255,255,255,0.1)',
575
- color: bench.name === 'FlexiReact' ? '#000' : '#fff'
576
- }}
577
- >
578
- {bench.time}ms
579
- </div>
580
- </div>
581
- </div>
582
- ))}
583
- </div>
584
- </div>
585
- </section>
586
-
587
- {/* Why FlexiReact */}
588
- <section className="py-24 px-4">
589
- <div className="max-w-6xl mx-auto">
590
- <div className="text-center mb-16">
591
- <h2 className="text-3xl sm:text-4xl font-bold mb-4">Why FlexiReact?</h2>
592
- <p className="text-gray-400">Built for developers who value speed and simplicity</p>
593
- </div>
594
-
595
- <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
596
- {whyFlexiReact.map((item, i) => (
597
- <div key={i} className="p-6 rounded-2xl bg-gradient-to-b from-white/5 to-transparent border border-white/5">
598
- <div className="text-3xl mb-4">{item.icon}</div>
599
- <h3 className="font-semibold mb-2">{item.title}</h3>
600
- <p className="text-sm text-gray-400">{item.desc}</p>
601
- </div>
602
- ))}
603
421
  </div>
604
422
  </div>
605
- </section>
606
-
607
- {/* Ecosystem */}
608
- <section className="py-24 px-4 bg-white/[0.02]">
609
- <div className="max-w-6xl mx-auto">
610
- <div className="text-center mb-16">
611
- <h2 className="text-3xl sm:text-4xl font-bold mb-4">Complete Ecosystem</h2>
612
- <p className="text-gray-400">Everything you need, batteries included</p>
613
- </div>
614
-
615
- <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
616
- {ecosystem.map((item, i) => (
617
- <div key={i} className="group p-6 rounded-2xl bg-gradient-to-b from-white/5 to-transparent border border-white/5 hover:border-[#00FF9C]/30 transition-all hover:scale-105">
618
- <div className="text-4xl mb-4">{item.icon}</div>
619
- <h3 className="font-semibold mb-1 group-hover:text-[#00FF9C] transition">{item.name}</h3>
620
- <p className="text-sm text-gray-400">{item.desc}</p>
621
- </div>
622
- ))}
623
- </div>
624
- </div>
625
- </section>
626
423
 
627
- {/* Backed By */}
628
- <section className="py-24 px-4">
629
- <div className="max-w-6xl mx-auto">
630
- <div className="text-center mb-12">
631
- <h2 className="text-2xl font-bold mb-8 text-gray-500">Trusted By</h2>
632
- </div>
633
-
634
- <div className="flex flex-wrap items-center justify-center gap-12">
635
- {backedBy.map((company, i) => (
636
- <div key={i} className="group flex items-center gap-3 opacity-40 hover:opacity-100 transition-opacity">
637
- <div className="w-12 h-12 rounded-lg bg-white/5 flex items-center justify-center font-bold text-xl group-hover:bg-[#00FF9C]/20 group-hover:text-[#00FF9C] transition">
638
- {company.logo}
639
- </div>
640
- <span className="font-semibold">{company.name}</span>
641
- </div>
642
- ))}
643
- </div>
644
- </div>
645
- </section>
646
-
647
- {/* Final CTA */}
648
- <section className="py-24 px-4">
649
- <div className="max-w-3xl mx-auto">
650
- <div className="relative p-12 rounded-3xl bg-gradient-to-b from-[#111] to-[#0a0a0a] border border-gray-800 overflow-hidden">
651
- <div className="absolute top-0 right-0 w-64 h-64 bg-[#00FF9C]/10 rounded-full blur-[100px]" />
652
- <div className="relative text-center">
653
- <h2 className="text-3xl sm:text-4xl font-bold mb-4">Ready to build?</h2>
654
- <p className="text-gray-400 mb-8">Create your first FlexiReact app in seconds</p>
655
-
656
- <div className="inline-block p-4 rounded-xl bg-black/50 border border-gray-800 font-mono text-sm mb-8">
657
- <span className="text-[#00FF9C]">$</span>
658
- <span className="text-gray-300 ml-2">npx create-flexireact my-app</span>
659
- </div>
660
-
661
- <div className="flex flex-col sm:flex-row gap-4 justify-center">
662
- <a href="https://github.com/flexireact/flexireact"
663
- className="inline-flex items-center justify-center gap-2 px-8 py-4 bg-[#00FF9C] text-black font-semibold rounded-xl hover:bg-[#00D68F] transition-all hover:scale-105">
664
- Start Building →
665
- </a>
666
- </div>
424
+ {/* Features Grid */}
425
+ <div className="grid grid-cols-2 md:grid-cols-4 gap-4 pt-16 max-w-3xl mx-auto">
426
+ {[
427
+ { icon: '⚡', label: 'Fast Refresh' },
428
+ { icon: '📦', label: 'File Routing' },
429
+ { icon: '🎨', label: 'Tailwind CSS' },
430
+ { icon: '🔒', label: 'TypeScript' },
431
+ ].map((feature) => (
432
+ <div key={feature.label} className="flex flex-col items-center gap-2 p-4 rounded-lg border border-border bg-white/5 hover:bg-white/10 transition-colors">
433
+ <span className="text-2xl">{feature.icon}</span>
434
+ <span className="text-sm font-medium">{feature.label}</span>
667
435
  </div>
668
- </div>
436
+ ))}
669
437
  </div>
670
- </section>
438
+ </div>
671
439
  </div>
672
440
  );
673
441
  }
@@ -774,7 +542,7 @@ export default function BlogPost({ params }: BlogPostProps) {
774
542
 
775
543
  <div className="prose prose-invert">
776
544
  <p>
777
- This page demonstrates dynamic routing in FlexiReact v3.
545
+ This page demonstrates dynamic routing in FlexiReact v4.
778
546
  The [slug].tsx file creates a dynamic route that matches any path under /blog/.
779
547
  </p>
780
548
  </div>
@@ -1 +1 @@
1
- {"version":3,"file":"default.js","sourceRoot":"","sources":["../../src/templates/default.ts"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"default.js","sourceRoot":"","sources":["../../src/templates/default.ts"],"names":[],"mappings":"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"}
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "create-flexireact",
3
- "version": "3.0.6",
4
- "description": "Create FlexiReact v3 apps with one command - The Modern React Framework",
3
+ "version": "4.0.0",
4
+ "description": "Create FlexiReact v4 apps with one command - The Modern React Framework",
5
5
  "author": "FlexiReact Team",
6
6
  "license": "MIT",
7
7
  "type": "module",
@@ -50,4 +50,4 @@
50
50
  "publishConfig": {
51
51
  "access": "public"
52
52
  }
53
- }
53
+ }