create-flexireact 3.0.4 → 3.0.6
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/templates/app-router.d.ts.map +1 -1
- package/dist/templates/app-router.js +240 -24
- package/dist/templates/app-router.js.map +1 -1
- package/dist/templates/default.d.ts.map +1 -1
- package/dist/templates/default.js +331 -37
- package/dist/templates/default.js.map +1 -1
- package/package.json +1 -1
|
@@ -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,
|
|
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"}
|
|
@@ -131,11 +131,50 @@ const backedBy = [
|
|
|
131
131
|
{ name: 'FramLink', logo: 'F' },
|
|
132
132
|
];
|
|
133
133
|
|
|
134
|
+
const stats = [
|
|
135
|
+
{ label: 'Components', value: '50+' },
|
|
136
|
+
{ label: 'Bundle Size', value: '~90kb' },
|
|
137
|
+
{ label: 'Build Time', value: '<1s' },
|
|
138
|
+
{ label: 'Lighthouse', value: '100' },
|
|
139
|
+
];
|
|
140
|
+
|
|
134
141
|
export default function HomePage() {
|
|
135
142
|
return (
|
|
136
|
-
<
|
|
137
|
-
{/*
|
|
138
|
-
<
|
|
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>
|
|
161
|
+
|
|
162
|
+
<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"
|
|
166
|
+
>
|
|
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>
|
|
171
|
+
</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">
|
|
139
178
|
{/* Gradient background */}
|
|
140
179
|
<div className="absolute inset-0 bg-[radial-gradient(ellipse_at_top,_var(--tw-gradient-stops))] from-[#00FF9C]/10 via-transparent to-transparent" />
|
|
141
180
|
<div className="absolute top-0 left-1/2 -translate-x-1/2 w-[600px] h-[600px] bg-[#00FF9C]/5 rounded-full blur-[120px]" />
|
|
@@ -215,17 +254,17 @@ export default function HomePage() {
|
|
|
215
254
|
</div>
|
|
216
255
|
</section>
|
|
217
256
|
|
|
218
|
-
{/* Features */}
|
|
219
|
-
<section className="py-24 px-4">
|
|
220
|
-
<div className="max-w-
|
|
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">
|
|
221
260
|
<div className="text-center mb-16">
|
|
222
|
-
<h2 className="text-3xl sm:text-4xl font-bold mb-4">
|
|
223
|
-
<p className="text-gray-400">
|
|
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>
|
|
224
263
|
</div>
|
|
225
264
|
|
|
226
265
|
<div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-4">
|
|
227
|
-
{
|
|
228
|
-
<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
|
|
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">
|
|
229
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">
|
|
230
269
|
{f.icon}
|
|
231
270
|
</div>
|
|
@@ -237,7 +276,151 @@ export default function HomePage() {
|
|
|
237
276
|
</div>
|
|
238
277
|
</section>
|
|
239
278
|
|
|
240
|
-
{/*
|
|
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
|
+
</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 */}
|
|
241
424
|
<section className="py-24 px-4">
|
|
242
425
|
<div className="max-w-3xl mx-auto">
|
|
243
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">
|
|
@@ -262,24 +445,57 @@ export default function HomePage() {
|
|
|
262
445
|
</div>
|
|
263
446
|
</section>
|
|
264
447
|
|
|
265
|
-
{/* Footer */}
|
|
266
|
-
<footer className="
|
|
267
|
-
<div className="max-w-
|
|
268
|
-
<div className="
|
|
269
|
-
<div
|
|
270
|
-
<
|
|
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>
|
|
460
|
+
</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>
|
|
271
483
|
</div>
|
|
272
|
-
<span className="font-semibold">FlexiReact</span>
|
|
273
484
|
</div>
|
|
274
|
-
|
|
275
|
-
<div className="flex items-center gap-
|
|
276
|
-
<
|
|
277
|
-
|
|
278
|
-
|
|
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>
|
|
279
494
|
</div>
|
|
280
495
|
</div>
|
|
281
496
|
</footer>
|
|
282
|
-
|
|
497
|
+
</main>
|
|
498
|
+
</div>
|
|
283
499
|
);
|
|
284
500
|
}
|
|
285
501
|
`,
|
|
@@ -1 +1 @@
|
|
|
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
|
|
1
|
+
{"version":3,"file":"app-router.js","sourceRoot":"","sources":["../../src/templates/app-router.ts"],"names":[],"mappings":"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"}
|
|
@@ -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,
|
|
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"}
|
|
@@ -320,60 +320,354 @@ body {
|
|
|
320
320
|
color: var(--color-foreground);
|
|
321
321
|
-webkit-font-smoothing: antialiased;
|
|
322
322
|
}
|
|
323
|
+
|
|
324
|
+
/* Fade-in and slide-up animations */
|
|
325
|
+
@keyframes fadeInUp {
|
|
326
|
+
from {
|
|
327
|
+
opacity: 0;
|
|
328
|
+
transform: translateY(30px);
|
|
329
|
+
}
|
|
330
|
+
to {
|
|
331
|
+
opacity: 1;
|
|
332
|
+
transform: translateY(0);
|
|
333
|
+
}
|
|
334
|
+
}
|
|
335
|
+
|
|
336
|
+
.animate-fade-in-up {
|
|
337
|
+
animation: fadeInUp 0.6s ease-out forwards;
|
|
338
|
+
}
|
|
339
|
+
|
|
340
|
+
.animate-delay-100 {
|
|
341
|
+
animation-delay: 0.1s;
|
|
342
|
+
opacity: 0;
|
|
343
|
+
}
|
|
344
|
+
|
|
345
|
+
.animate-delay-200 {
|
|
346
|
+
animation-delay: 0.2s;
|
|
347
|
+
opacity: 0;
|
|
348
|
+
}
|
|
349
|
+
|
|
350
|
+
.animate-delay-300 {
|
|
351
|
+
animation-delay: 0.3s;
|
|
352
|
+
opacity: 0;
|
|
353
|
+
}
|
|
354
|
+
|
|
355
|
+
.animate-delay-400 {
|
|
356
|
+
animation-delay: 0.4s;
|
|
357
|
+
opacity: 0;
|
|
358
|
+
}
|
|
323
359
|
`,
|
|
324
360
|
// ========================================================================
|
|
325
361
|
// Routes Directory - FlexiReact v3 Routing
|
|
326
362
|
// ========================================================================
|
|
327
363
|
'routes/(public)/home.tsx': `import React from 'react';
|
|
328
|
-
import { Button } from '@/app/components/ui';
|
|
329
364
|
|
|
330
365
|
export const metadata = {
|
|
331
366
|
title: 'FlexiReact v3 - The Modern React Framework',
|
|
332
367
|
description: 'Build fast, modern web apps with FlexiReact v3',
|
|
333
368
|
};
|
|
334
369
|
|
|
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
|
+
|
|
335
416
|
export default function HomePage() {
|
|
336
417
|
return (
|
|
337
|
-
<div className="min-h-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
<div className="
|
|
341
|
-
|
|
342
|
-
</div>
|
|
343
|
-
|
|
344
|
-
{/* Heading */}
|
|
345
|
-
<h1 className="text-5xl md:text-6xl font-bold mb-6">
|
|
346
|
-
Welcome to{' '}
|
|
347
|
-
<span className="text-primary">FlexiReact v3</span>
|
|
348
|
-
</h1>
|
|
349
|
-
|
|
350
|
-
{/* Description */}
|
|
351
|
-
<p className="text-xl text-muted mb-8 max-w-2xl mx-auto">
|
|
352
|
-
The modern React framework with SSR, Islands, Edge Runtime, and 50+ UI components.
|
|
353
|
-
Build blazing fast web applications with ease.
|
|
354
|
-
</p>
|
|
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]" />
|
|
355
423
|
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
|
|
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>
|
|
459
|
+
|
|
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>
|
|
360
478
|
</div>
|
|
361
|
-
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
|
|
372
|
-
|
|
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>
|
|
497
|
+
</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
|
+
))}
|
|
373
524
|
</div>
|
|
374
|
-
|
|
525
|
+
</div>
|
|
375
526
|
</div>
|
|
376
|
-
</
|
|
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>
|
|
542
|
+
</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
|
+
</div>
|
|
604
|
+
</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
|
+
|
|
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>
|
|
667
|
+
</div>
|
|
668
|
+
</div>
|
|
669
|
+
</div>
|
|
670
|
+
</section>
|
|
377
671
|
</div>
|
|
378
672
|
);
|
|
379
673
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"default.js","sourceRoot":"","sources":["../../src/templates/default.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAIH,MAAM,UAAU,eAAe,CAAC,WAAmB;IACjD,OAAO;QACL,2EAA2E;QAC3E,eAAe;QACf,2EAA2E;QAE3E,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,yEAAyE;aAC/E;YACD,YAAY,EAAE;gBACZ,KAAK,EAAE,SAAS;gBAChB,WAAW,EAAE,SAAS;gBACtB,kBAAkB,EAAE,QAAQ;gBAC5B,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;oBACd,gBAAgB,EAAE,CAAC,oBAAoB,CAAC;oBACxC,SAAS,EAAE,CAAC,SAAS,CAAC;iBACvB;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;;;;;;;;;;;;;;CAc3B;QAEG,2EAA2E;QAC3E,6CAA6C;QAC7C,2EAA2E;QAE3E,gBAAgB,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2BrB;QAEG,kBAAkB;QAClB,8BAA8B,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsCnC;QAEG,4BAA4B,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqCjC;QAEG,4BAA4B,EAAE;;CAEjC;QAEG,sBAAsB;QACtB,kCAAkC,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6BvC;QAEG,kCAAkC,EAAE;;;;;;;;;;;;;;;;CAgBvC;QAEG,gCAAgC,EAAE;;CAErC;QAEG,yBAAyB,EAAE;;CAE9B;QAEG,YAAY;QACZ,iCAAiC,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwCtC;QAEG,SAAS;QACT,wBAAwB,EAAE
|
|
1
|
+
{"version":3,"file":"default.js","sourceRoot":"","sources":["../../src/templates/default.ts"],"names":[],"mappings":"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"}
|