create-flexireact 1.3.0 → 1.3.2

package/index.js

@@ -616,7 +616,7 @@ interface LayoutProps {
 
 export default function RootLayout({ children }: LayoutProps) {
   return (
-    <div className="relative min-h-screen bg-background text-foreground antialiased">
+    <div className="app">
       <Navbar />
       <main>{children}</main>
       <Footer />
@@ -643,39 +643,45 @@ export default function HomePage() {
   // Styles
   // ============================================================================
 
-  'app/styles/globals.css': () => `@tailwind base;
-@tailwind components;
-@tailwind utilities;
+  'app/styles/globals.css': () => `/* FlexiReact Default Template Styles */
 
 :root {
   --bg: #0a0a0a;
   --fg: #fafafa;
   --primary: #10b981;
+  --primary-light: #34d399;
+  --accent: #06b6d4;
   --muted: #71717a;
   --border: #27272a;
   --card: #18181b;
 }
 
-* { box-sizing: border-box; margin: 0; padding: 0; }
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+
+html { scroll-behavior: smooth; }
 
 body {
-  font-family: 'Inter', system-ui, sans-serif;
+  font-family: 'Inter', system-ui, -apple-system, sans-serif;
   background: var(--bg);
   color: var(--fg);
   min-height: 100vh;
   -webkit-font-smoothing: antialiased;
+  line-height: 1.6;
 }
 
-a { color: inherit; text-decoration: none; }
+a { color: inherit; text-decoration: none; transition: color 0.2s; }
 a:hover { color: var(--primary); }
 
+/* Layout */
+.app { min-height: 100vh; }
+
 /* Navbar */
 .navbar {
   position: sticky;
   top: 0;
   z-index: 50;
   border-bottom: 1px solid var(--border);
-  background: rgba(10,10,10,0.8);
+  background: rgba(10,10,10,0.85);
   backdrop-filter: blur(12px);
 }
 .navbar-inner {
@@ -690,15 +696,16 @@ a:hover { color: var(--primary); }
 .logo-icon {
   width: 32px;
   height: 32px;
-  background: linear-gradient(135deg, var(--primary), #06b6d4);
+  background: linear-gradient(135deg, var(--primary), var(--accent));
   border-radius: 8px;
   display: flex;
   align-items: center;
   justify-content: center;
+  font-size: 1rem;
 }
 .logo-text { font-weight: 700; font-size: 1.125rem; }
-.nav-links { display: flex; gap: 1.5rem; }
-.nav-links a { color: var(--muted); font-size: 0.875rem; }
+.nav-links { display: flex; gap: 2rem; }
+.nav-links a { color: var(--muted); font-size: 0.9375rem; font-weight: 500; }
 .nav-links a:hover { color: var(--fg); }
 
 /* Hero */
@@ -709,48 +716,57 @@ a:hover { color: var(--primary); }
   align-items: center;
   justify-content: center;
   overflow: hidden;
+  padding: 4rem 1.5rem;
 }
 .hero-glow {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
-  width: 600px;
-  height: 600px;
-  background: radial-gradient(circle, rgba(16,185,129,0.15), transparent 70%);
+  width: 700px;
+  height: 700px;
+  background: radial-gradient(circle, rgba(16,185,129,0.12), transparent 70%);
   pointer-events: none;
 }
 .hero-content {
+  position: relative;
+  z-index: 1;
   text-align: center;
   padding: 2rem;
   max-width: 800px;
 }
 .hero-badge {
-  display: inline-block;
-  padding: 0.5rem 1rem;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 1.25rem;
   background: rgba(16,185,129,0.1);
   border: 1px solid rgba(16,185,129,0.2);
   border-radius: 9999px;
   font-size: 0.875rem;
+  font-weight: 500;
   color: var(--primary);
   margin-bottom: 2rem;
 }
 .hero-title {
-  font-size: clamp(2.5rem, 6vw, 4.5rem);
+  font-size: clamp(2.5rem, 7vw, 4.5rem);
   font-weight: 800;
   line-height: 1.1;
+  letter-spacing: -0.02em;
   margin-bottom: 1.5rem;
 }
 .gradient-text {
-  background: linear-gradient(90deg, var(--primary), #06b6d4);
+  background: linear-gradient(135deg, var(--primary), var(--accent));
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
+  background-clip: text;
 }
 .hero-subtitle {
   font-size: 1.125rem;
   color: var(--muted);
   line-height: 1.7;
-  margin-bottom: 2.5rem;
+  max-width: 600px;
+  margin: 0 auto 2.5rem;
 }
 .hero-buttons {
   display: flex;
@@ -760,21 +776,36 @@ a:hover { color: var(--primary); }
   margin-bottom: 3rem;
 }
 .btn-primary {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
   padding: 0.875rem 2rem;
-  background: var(--primary);
+  background: linear-gradient(135deg, var(--primary), var(--accent));
   color: #000;
   font-weight: 600;
-  border-radius: 8px;
-  transition: opacity 0.2s;
+  border-radius: 10px;
+  transition: all 0.2s;
+}
+.btn-primary:hover { 
+  transform: translateY(-2px);
+  box-shadow: 0 10px 30px rgba(16,185,129,0.3);
+  color: #000; 
 }
-.btn-primary:hover { opacity: 0.9; color: #000; }
 .btn-outline {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
   padding: 0.875rem 2rem;
   border: 1px solid var(--border);
-  border-radius: 8px;
-  transition: border-color 0.2s;
+  border-radius: 10px;
+  font-weight: 600;
+  transition: all 0.2s;
+}
+.btn-outline:hover { 
+  border-color: var(--primary); 
+  background: rgba(16,185,129,0.1);
+  color: var(--fg); 
 }
-.btn-outline:hover { border-color: var(--primary); color: var(--fg); }
 
 /* Terminal */
 .terminal {
@@ -784,23 +815,24 @@ a:hover { color: var(--primary); }
   max-width: 500px;
   margin: 0 auto;
   overflow: hidden;
+  text-align: left;
 }
 .terminal-header {
-  padding: 0.75rem 1rem;
+  padding: 0.875rem 1rem;
   border-bottom: 1px solid var(--border);
   display: flex;
   gap: 0.5rem;
+  background: rgba(255,255,255,0.02);
 }
 .dot { width: 12px; height: 12px; border-radius: 50%; }
 .dot.red { background: #ef4444; }
 .dot.yellow { background: #eab308; }
 .dot.green { background: #22c55e; }
 .terminal-body {
-  padding: 1rem;
-  font-family: monospace;
+  padding: 1.25rem;
+  font-family: 'JetBrains Mono', 'Fira Code', monospace;
   font-size: 0.875rem;
-  text-align: left;
-  line-height: 1.6;
+  line-height: 1.8;
 }
 .dim { color: var(--muted); }
 .green { color: var(--primary); }
@@ -815,34 +847,50 @@ a:hover { color: var(--primary); }
   font-size: 2rem;
   font-weight: 700;
   text-align: center;
-  margin-bottom: 1rem;
+  margin-bottom: 0.75rem;
 }
 .features-subtitle {
   text-align: center;
   color: var(--muted);
   margin-bottom: 3rem;
+  font-size: 1.0625rem;
 }
 .features-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
   gap: 1.5rem;
 }
 .feature-card {
   background: var(--card);
   border: 1px solid var(--border);
+  border-radius: 16px;
+  padding: 1.75rem;
+  transition: all 0.3s;
+}
+.feature-card:hover { 
+  border-color: var(--primary);
+  transform: translateY(-4px);
+}
+.feature-icon { 
+  font-size: 2rem; 
+  margin-bottom: 1rem; 
+  display: block;
+  width: 48px;
+  height: 48px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(16,185,129,0.1);
   border-radius: 12px;
-  padding: 1.5rem;
-  transition: border-color 0.2s;
 }
-.feature-card:hover { border-color: var(--primary); }
-.feature-icon { font-size: 2rem; margin-bottom: 1rem; display: block; }
-.feature-title { font-weight: 600; margin-bottom: 0.5rem; }
-.feature-desc { color: var(--muted); font-size: 0.875rem; line-height: 1.6; }
+.feature-title { font-weight: 600; font-size: 1.0625rem; margin-bottom: 0.5rem; }
+.feature-desc { color: var(--muted); font-size: 0.9375rem; line-height: 1.6; }
 
 /* Footer */
 .footer {
   border-top: 1px solid var(--border);
   padding: 2rem 1.5rem;
+  margin-top: 2rem;
 }
 .footer-inner {
   max-width: 1200px;
@@ -856,7 +904,16 @@ a:hover { color: var(--primary); }
   color: var(--muted);
 }
 .footer-links { display: flex; gap: 1.5rem; }
-.footer-links a:hover { color: var(--fg); }
+.footer-links a:hover { color: var(--primary); }
+
+/* Responsive */
+@media (max-width: 768px) {
+  .nav-links { display: none; }
+  .hero { min-height: auto; padding: 6rem 1.5rem 4rem; }
+  .hero-buttons { flex-direction: column; align-items: center; }
+  .btn-primary, .btn-outline { width: 100%; justify-content: center; }
+  .footer-inner { flex-direction: column; text-align: center; }
+}
 `,
 
   // ============================================================================
@@ -1173,29 +1230,115 @@ export default function HomePage() {
   // Styles
   // ============================================================================
 
-  'app/styles/globals.css': () => `@tailwind base;
-@tailwind components;
-@tailwind utilities;
+  'app/styles/globals.css': () => `/* Flexi UI Template Styles */
 
 :root {
   --bg: #0a0a0a;
   --fg: #fafafa;
   --primary: #00FF9C;
+  --primary-dark: #10b981;
   --muted: #94a3b8;
   --border: #1e293b;
   --card: #0f0f0f;
 }
 
-* { box-sizing: border-box; margin: 0; padding: 0; }
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+
+html { scroll-behavior: smooth; }
 
 body {
-  font-family: 'Inter', system-ui, sans-serif;
+  font-family: 'Inter', system-ui, -apple-system, sans-serif;
   background: var(--bg);
   color: var(--fg);
   min-height: 100vh;
+  -webkit-font-smoothing: antialiased;
+  line-height: 1.6;
+}
+
+a { color: inherit; text-decoration: none; transition: color 0.2s; }
+a:hover { color: var(--primary); }
+
+/* Buttons */
+button {
+  font-family: inherit;
+  cursor: pointer;
+}
+
+.btn, [class*="btn-"] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  padding: 0.75rem 1.5rem;
+  font-size: 0.9375rem;
+  font-weight: 600;
+  border-radius: 8px;
+  transition: all 0.2s;
+  border: none;
+  cursor: pointer;
+}
+
+.btn-primary, button[class*="primary"] {
+  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
+  color: #000;
 }
 
-a { color: inherit; text-decoration: none; }
+.btn-primary:hover, button[class*="primary"]:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 8px 25px rgba(0, 255, 156, 0.3);
+}
+
+.btn-outline, button[class*="outline"] {
+  background: transparent;
+  border: 1px solid var(--border);
+  color: var(--fg);
+}
+
+.btn-outline:hover, button[class*="outline"]:hover {
+  border-color: var(--primary);
+  background: rgba(0, 255, 156, 0.1);
+}
+
+.btn-ghost, button[class*="ghost"] {
+  background: transparent;
+  border: 1px solid var(--border);
+  color: var(--fg);
+}
+
+.btn-ghost:hover, button[class*="ghost"]:hover {
+  background: rgba(255, 255, 255, 0.05);
+  border-color: var(--muted);
+}
+
+.btn-sm, button[class*="sm"] {
+  padding: 0.5rem 1rem;
+  font-size: 0.875rem;
+}
+
+/* Badge */
+[class*="badge"], .badge {
+  display: inline-flex;
+  align-items: center;
+  padding: 0.25rem 0.75rem;
+  font-size: 0.75rem;
+  font-weight: 600;
+  border-radius: 9999px;
+  background: rgba(0, 255, 156, 0.1);
+  color: var(--primary);
+  border: 1px solid rgba(0, 255, 156, 0.2);
+}
+
+/* Card */
+[class*="card"], .card {
+  background: var(--card);
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  transition: all 0.3s;
+}
+
+[class*="card"]:hover, .card:hover {
+  border-color: var(--primary);
+}
 
 /* Navbar */
 .navbar {
@@ -1205,7 +1348,7 @@ a { color: inherit; text-decoration: none; }
   right: 0;
   z-index: 50;
   border-bottom: 1px solid var(--border);
-  background: rgba(10,10,10,0.8);
+  background: rgba(10,10,10,0.85);
   backdrop-filter: blur(12px);
 }
 .navbar-inner {
@@ -1220,16 +1363,17 @@ a { color: inherit; text-decoration: none; }
 .logo-icon {
   width: 32px;
   height: 32px;
-  background: linear-gradient(135deg, var(--primary), #10b981);
+  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
   border-radius: 8px;
   display: flex;
   align-items: center;
   justify-content: center;
   font-weight: 900;
+  font-size: 1rem;
   color: #000;
 }
-.logo-text { font-weight: 700; }
-.nav-links { display: flex; gap: 0.5rem; }
+.logo-text { font-weight: 700; font-size: 1.125rem; }
+.nav-links { display: flex; gap: 0.75rem; align-items: center; }
 
 /* Hero */
 .hero {
@@ -1238,44 +1382,51 @@ a { color: inherit; text-decoration: none; }
   display: flex;
   align-items: center;
   justify-content: center;
-  padding-top: 4rem;
+  padding: 6rem 1.5rem;
+  overflow: hidden;
 }
 .hero-glow {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
-  width: 600px;
-  height: 600px;
-  background: radial-gradient(circle, rgba(0,255,156,0.15), transparent 70%);
+  width: 700px;
+  height: 700px;
+  background: radial-gradient(circle, rgba(0,255,156,0.12), transparent 70%);
   pointer-events: none;
 }
 .hero-content {
+  position: relative;
+  z-index: 1;
   text-align: center;
   padding: 2rem;
   max-width: 800px;
 }
 .hero-title {
-  font-size: clamp(2.5rem, 6vw, 4rem);
+  font-size: clamp(2.5rem, 7vw, 4.5rem);
   font-weight: 800;
   line-height: 1.1;
+  letter-spacing: -0.02em;
   margin-bottom: 1.5rem;
 }
 .gradient-text {
-  background: linear-gradient(90deg, var(--primary), #10b981);
+  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
+  background-clip: text;
 }
 .hero-subtitle {
   font-size: 1.125rem;
   color: var(--muted);
   line-height: 1.7;
-  margin-bottom: 2rem;
+  max-width: 600px;
+  margin: 0 auto 2.5rem;
 }
 .hero-buttons {
   display: flex;
   gap: 1rem;
   justify-content: center;
+  flex-wrap: wrap;
 }
 
 /* Features */
@@ -1292,17 +1443,28 @@ a { color: inherit; text-decoration: none; }
 }
 .features-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
   gap: 1.5rem;
 }
 .feature-card {
-  padding: 1.5rem;
+  padding: 1.75rem;
   text-align: center;
+  background: var(--card);
+  border: 1px solid var(--border);
+  border-radius: 16px;
+  transition: all 0.3s;
+}
+.feature-card:hover { 
+  border-color: var(--primary);
+  transform: translateY(-4px);
+}
+.feature-icon { 
+  font-size: 2rem; 
+  margin-bottom: 1rem;
+  display: block;
 }
-.feature-card:hover { border-color: var(--primary); }
-.feature-icon { font-size: 2rem; margin-bottom: 1rem; }
 .feature-card h3 { font-weight: 600; margin-bottom: 0.5rem; }
-.feature-card p { color: var(--muted); font-size: 0.875rem; }
+.feature-card p { color: var(--muted); font-size: 0.9375rem; line-height: 1.6; }
 
 /* Footer */
 .footer {
@@ -1310,12 +1472,22 @@ a { color: inherit; text-decoration: none; }
   padding: 2rem 1.5rem;
   display: flex;
   justify-content: space-between;
+  align-items: center;
   max-width: 1200px;
   margin: 0 auto;
   color: var(--muted);
   font-size: 0.875rem;
 }
 .footer a:hover { color: var(--primary); }
+
+/* Responsive */
+@media (max-width: 768px) {
+  .nav-links { display: none; }
+  .hero { min-height: auto; padding: 8rem 1.5rem 4rem; }
+  .hero-buttons { flex-direction: column; align-items: center; }
+  .hero-buttons button, .hero-buttons a { width: 100%; }
+  .footer { flex-direction: column; gap: 1rem; text-align: center; }
+}
 `,
 
   // ============================================================================

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-flexireact",
-  "version": "1.3.0",
+  "version": "1.3.2",
   "description": "Create FlexiReact apps with one command - The Modern React Framework",
   "author": "FlexiReact Team",
   "license": "MIT",