nextpy-framework 2.4.0__tar.gz → 2.4.2__tar.gz

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.
Files changed (77) hide show
  1. {nextpy_framework-2.4.0 → nextpy_framework-2.4.2}/.nextpy_framework/nextpy/cli.py +325 -327
  2. {nextpy_framework-2.4.0 → nextpy_framework-2.4.2}/.nextpy_framework/nextpy/core/component_router.py +1 -1
  3. {nextpy_framework-2.4.0 → nextpy_framework-2.4.2}/.nextpy_framework/nextpy/core/router.py +1 -1
  4. {nextpy_framework-2.4.0 → nextpy_framework-2.4.2}/.nextpy_framework/nextpy/server/app.py +3 -0
  5. {nextpy_framework-2.4.0 → nextpy_framework-2.4.2/.nextpy_framework/nextpy_framework.egg-info}/PKG-INFO +1 -1
  6. {nextpy_framework-2.4.0/.nextpy_framework/nextpy_framework.egg-info → nextpy_framework-2.4.2}/PKG-INFO +1 -1
  7. {nextpy_framework-2.4.0 → nextpy_framework-2.4.2}/pyproject.toml +1 -1
  8. {nextpy_framework-2.4.0 → nextpy_framework-2.4.2}/.nextpy_framework/nextpy/__init__.py +0 -0
  9. {nextpy_framework-2.4.0 → nextpy_framework-2.4.2}/.nextpy_framework/nextpy/auth.py +0 -0
  10. {nextpy_framework-2.4.0 → nextpy_framework-2.4.2}/.nextpy_framework/nextpy/builder.py +0 -0
  11. {nextpy_framework-2.4.0 → nextpy_framework-2.4.2}/.nextpy_framework/nextpy/components/__init__.py +0 -0
  12. {nextpy_framework-2.4.0 → nextpy_framework-2.4.2}/.nextpy_framework/nextpy/components/debug/AutoDebug.py +0 -0
  13. {nextpy_framework-2.4.0 → nextpy_framework-2.4.2}/.nextpy_framework/nextpy/components/debug/DebugIcon.py +0 -0
  14. {nextpy_framework-2.4.0 → nextpy_framework-2.4.2}/.nextpy_framework/nextpy/components/debug/DebugIconFixed.py +0 -0
  15. {nextpy_framework-2.4.0 → nextpy_framework-2.4.2}/.nextpy_framework/nextpy/components/feedback.py +0 -0
  16. {nextpy_framework-2.4.0 → nextpy_framework-2.4.2}/.nextpy_framework/nextpy/components/form.py +0 -0
  17. {nextpy_framework-2.4.0 → nextpy_framework-2.4.2}/.nextpy_framework/nextpy/components/head.py +0 -0
  18. {nextpy_framework-2.4.0 → nextpy_framework-2.4.2}/.nextpy_framework/nextpy/components/hooks_provider.py +0 -0
  19. {nextpy_framework-2.4.0 → nextpy_framework-2.4.2}/.nextpy_framework/nextpy/components/image.py +0 -0
  20. {nextpy_framework-2.4.0 → nextpy_framework-2.4.2}/.nextpy_framework/nextpy/components/layout.py +0 -0
  21. {nextpy_framework-2.4.0 → nextpy_framework-2.4.2}/.nextpy_framework/nextpy/components/link.py +0 -0
  22. {nextpy_framework-2.4.0 → nextpy_framework-2.4.2}/.nextpy_framework/nextpy/components/loader.py +0 -0
  23. {nextpy_framework-2.4.0 → nextpy_framework-2.4.2}/.nextpy_framework/nextpy/components/navigation.py +0 -0
  24. {nextpy_framework-2.4.0 → nextpy_framework-2.4.2}/.nextpy_framework/nextpy/components/toast.py +0 -0
  25. {nextpy_framework-2.4.0 → nextpy_framework-2.4.2}/.nextpy_framework/nextpy/components/ui.py +0 -0
  26. {nextpy_framework-2.4.0 → nextpy_framework-2.4.2}/.nextpy_framework/nextpy/components/visual.py +0 -0
  27. {nextpy_framework-2.4.0 → nextpy_framework-2.4.2}/.nextpy_framework/nextpy/components.py +0 -0
  28. {nextpy_framework-2.4.0 → nextpy_framework-2.4.2}/.nextpy_framework/nextpy/config.py +0 -0
  29. {nextpy_framework-2.4.0 → nextpy_framework-2.4.2}/.nextpy_framework/nextpy/core/__init__.py +0 -0
  30. {nextpy_framework-2.4.0 → nextpy_framework-2.4.2}/.nextpy_framework/nextpy/core/builder.py +0 -0
  31. {nextpy_framework-2.4.0 → nextpy_framework-2.4.2}/.nextpy_framework/nextpy/core/component_renderer.py +0 -0
  32. {nextpy_framework-2.4.0 → nextpy_framework-2.4.2}/.nextpy_framework/nextpy/core/data_fetching.py +0 -0
  33. {nextpy_framework-2.4.0 → nextpy_framework-2.4.2}/.nextpy_framework/nextpy/core/demo_pages_simple.py +0 -0
  34. {nextpy_framework-2.4.0 → nextpy_framework-2.4.2}/.nextpy_framework/nextpy/core/demo_router.py +0 -0
  35. {nextpy_framework-2.4.0 → nextpy_framework-2.4.2}/.nextpy_framework/nextpy/core/renderer.py +0 -0
  36. {nextpy_framework-2.4.0 → nextpy_framework-2.4.2}/.nextpy_framework/nextpy/core/sync.py +0 -0
  37. {nextpy_framework-2.4.0 → nextpy_framework-2.4.2}/.nextpy_framework/nextpy/db.py +0 -0
  38. {nextpy_framework-2.4.0 → nextpy_framework-2.4.2}/.nextpy_framework/nextpy/dev_server.py +0 -0
  39. {nextpy_framework-2.4.0 → nextpy_framework-2.4.2}/.nextpy_framework/nextpy/dev_tools.py +0 -0
  40. {nextpy_framework-2.4.0 → nextpy_framework-2.4.2}/.nextpy_framework/nextpy/errors.py +0 -0
  41. {nextpy_framework-2.4.0 → nextpy_framework-2.4.2}/.nextpy_framework/nextpy/hooks.py +0 -0
  42. {nextpy_framework-2.4.0 → nextpy_framework-2.4.2}/.nextpy_framework/nextpy/hooks_provider.py +0 -0
  43. {nextpy_framework-2.4.0 → nextpy_framework-2.4.2}/.nextpy_framework/nextpy/hooks_provider_new.py +0 -0
  44. {nextpy_framework-2.4.0 → nextpy_framework-2.4.2}/.nextpy_framework/nextpy/jsx.py +0 -0
  45. {nextpy_framework-2.4.0 → nextpy_framework-2.4.2}/.nextpy_framework/nextpy/jsx_preprocessor.py +0 -0
  46. {nextpy_framework-2.4.0 → nextpy_framework-2.4.2}/.nextpy_framework/nextpy/jsx_transformer.py +0 -0
  47. {nextpy_framework-2.4.0 → nextpy_framework-2.4.2}/.nextpy_framework/nextpy/main.py +0 -0
  48. {nextpy_framework-2.4.0 → nextpy_framework-2.4.2}/.nextpy_framework/nextpy/performance.py +0 -0
  49. {nextpy_framework-2.4.0 → nextpy_framework-2.4.2}/.nextpy_framework/nextpy/plugins/__init__.py +0 -0
  50. {nextpy_framework-2.4.0 → nextpy_framework-2.4.2}/.nextpy_framework/nextpy/plugins/base.py +0 -0
  51. {nextpy_framework-2.4.0 → nextpy_framework-2.4.2}/.nextpy_framework/nextpy/plugins/builtin.py +0 -0
  52. {nextpy_framework-2.4.0 → nextpy_framework-2.4.2}/.nextpy_framework/nextpy/plugins/config.py +0 -0
  53. {nextpy_framework-2.4.0 → nextpy_framework-2.4.2}/.nextpy_framework/nextpy/plugins.py +0 -0
  54. {nextpy_framework-2.4.0 → nextpy_framework-2.4.2}/.nextpy_framework/nextpy/py.typed +0 -0
  55. {nextpy_framework-2.4.0 → nextpy_framework-2.4.2}/.nextpy_framework/nextpy/security.py +0 -0
  56. {nextpy_framework-2.4.0 → nextpy_framework-2.4.2}/.nextpy_framework/nextpy/server/__init__.py +0 -0
  57. {nextpy_framework-2.4.0 → nextpy_framework-2.4.2}/.nextpy_framework/nextpy/server/debug.py +0 -0
  58. {nextpy_framework-2.4.0 → nextpy_framework-2.4.2}/.nextpy_framework/nextpy/server/middleware.py +0 -0
  59. {nextpy_framework-2.4.0 → nextpy_framework-2.4.2}/.nextpy_framework/nextpy/true_jsx.py +0 -0
  60. {nextpy_framework-2.4.0 → nextpy_framework-2.4.2}/.nextpy_framework/nextpy/utils/__init__.py +0 -0
  61. {nextpy_framework-2.4.0 → nextpy_framework-2.4.2}/.nextpy_framework/nextpy/utils/cache.py +0 -0
  62. {nextpy_framework-2.4.0 → nextpy_framework-2.4.2}/.nextpy_framework/nextpy/utils/email.py +0 -0
  63. {nextpy_framework-2.4.0 → nextpy_framework-2.4.2}/.nextpy_framework/nextpy/utils/file_upload.py +0 -0
  64. {nextpy_framework-2.4.0 → nextpy_framework-2.4.2}/.nextpy_framework/nextpy/utils/logging.py +0 -0
  65. {nextpy_framework-2.4.0 → nextpy_framework-2.4.2}/.nextpy_framework/nextpy/utils/search.py +0 -0
  66. {nextpy_framework-2.4.0 → nextpy_framework-2.4.2}/.nextpy_framework/nextpy/utils/seo.py +0 -0
  67. {nextpy_framework-2.4.0 → nextpy_framework-2.4.2}/.nextpy_framework/nextpy/utils/validators.py +0 -0
  68. {nextpy_framework-2.4.0 → nextpy_framework-2.4.2}/.nextpy_framework/nextpy/websocket.py +0 -0
  69. {nextpy_framework-2.4.0 → nextpy_framework-2.4.2}/.nextpy_framework/nextpy_framework.egg-info/SOURCES.txt +0 -0
  70. {nextpy_framework-2.4.0 → nextpy_framework-2.4.2}/.nextpy_framework/nextpy_framework.egg-info/dependency_links.txt +0 -0
  71. {nextpy_framework-2.4.0 → nextpy_framework-2.4.2}/.nextpy_framework/nextpy_framework.egg-info/entry_points.txt +0 -0
  72. {nextpy_framework-2.4.0 → nextpy_framework-2.4.2}/.nextpy_framework/nextpy_framework.egg-info/requires.txt +0 -0
  73. {nextpy_framework-2.4.0 → nextpy_framework-2.4.2}/.nextpy_framework/nextpy_framework.egg-info/top_level.txt +0 -0
  74. {nextpy_framework-2.4.0 → nextpy_framework-2.4.2}/LICENSE +0 -0
  75. {nextpy_framework-2.4.0 → nextpy_framework-2.4.2}/README.md +0 -0
  76. {nextpy_framework-2.4.0 → nextpy_framework-2.4.2}/setup.cfg +0 -0
  77. {nextpy_framework-2.4.0 → nextpy_framework-2.4.2}/tests/test_routing.py +0 -0
@@ -426,6 +426,7 @@ def create(name: str):
426
426
  click.echo(f" 3️⃣ nextpy dev")
427
427
  click.echo(f"\n 🌐 Your app will be available at: http://localhost:5000")
428
428
  click.echo(f"\n 📚 Documentation: https://github.com/IBRAHIMFONYUY/nextpy-framework")
429
+
429
430
  click.echo()
430
431
 
431
432
  except Exception as e:
@@ -532,7 +533,7 @@ def version():
532
533
  click.echo(click.style("\n 📋 NextPy Framework Info", fg="cyan", bold=True))
533
534
  click.echo(click.style(" ===================\n", fg="cyan"))
534
535
 
535
- click.echo(f" 🏷️ Version: 2.4.0")
536
+ click.echo(f" 🏷️ Version: 2.4.2")
536
537
  click.echo(f" 🐍 Python: {sys.version.split()[0]}")
537
538
  click.echo(f" ⚡ Framework: NextPy")
538
539
  click.echo(f" 🎨 Architecture: True JSX")
@@ -761,9 +762,9 @@ def {name.title()}(props = None):
761
762
  title = props.get("title", "{name.title()} Page")
762
763
 
763
764
  return (
764
- <div class="max-w-4xl px-4 py-12 mx-auto">
765
- <h1 class="mb-6 text-4xl font-bold text-gray-900">{{title}}</h1>
766
- <p class="text-lg text-gray-600">
765
+ <div className="max-w-4xl px-4 py-12 mx-auto">
766
+ <h1 className="mb-6 text-4xl font-bold text-gray-900">{{title}}</h1>
767
+ <p className="text-lg text-gray-600">
767
768
  This is the {name} page generated by NextPy.
768
769
  </p>
769
770
  </div>
@@ -828,7 +829,7 @@ def {name.title()}(props = None):
828
829
  className = props.get("className", "")
829
830
 
830
831
  return (
831
- <div class="{name.lower()}-component " + className>
832
+ <div className="{name.lower()}-component " + className>
832
833
  {{children}}
833
834
  </div>
834
835
  )
@@ -972,7 +973,9 @@ body {
972
973
  }
973
974
  },
974
975
  },
975
- plugins: [],
976
+ plugins: [
977
+ require('@tailwindcss/postcss'),
978
+ ],
976
979
  };''')
977
980
  click.echo(" Created: tailwind.config.js")
978
981
 
@@ -1020,22 +1023,22 @@ def Home(props=None):
1020
1023
  message = props.get("message", "Build amazing web apps with Python and True JSX")
1021
1024
 
1022
1025
  return (
1023
- <div class="min-h-screen bg-gradient-to-br from-blue-600 via-purple-600 to-pink-600">
1026
+ <div className="min-h-screen bg-gradient-to-br from-blue-600 via-purple-600 to-pink-600">
1024
1027
  {/* Navigation */}
1025
- <nav class="bg-white border-b border-white bg-opacity-10 backdrop-blur-md border-opacity-20">
1026
- <div class="px-4 mx-auto max-w-7xl sm:px-6 lg:px-8">
1027
- <div class="flex items-center justify-between h-16">
1028
- <div class="flex items-center">
1029
- <h1 class="text-xl font-bold text-white">NextPy</h1>
1028
+ <nav className="bg-white border-b border-white bg-opacity-10 backdrop-blur-md border-opacity-20">
1029
+ <div className="px-4 mx-auto max-w-7xl sm:px-6 lg:px-8">
1030
+ <div className="flex items-center justify-between h-16">
1031
+ <div className="flex items-center">
1032
+ <h1 className="text-xl font-bold text-white">NextPy</h1>
1030
1033
  </div>
1031
- <div class="flex space-x-4">
1032
- <a href="/about" class="px-3 py-2 text-sm font-medium text-white transition-colors rounded-md hover:text-blue-200">
1034
+ <div className="flex space-x-4">
1035
+ <a href="/about" className="px-3 py-2 text-sm font-medium text-white transition-colors rounded-md hover:text-blue-200">
1033
1036
  About
1034
1037
  </a>
1035
- <a href="/features" class="px-3 py-2 text-sm font-medium text-white transition-colors rounded-md hover:text-blue-200">
1038
+ <a href="/features" className="px-3 py-2 text-sm font-medium text-white transition-colors rounded-md hover:text-blue-200">
1036
1039
  Features
1037
1040
  </a>
1038
- <a href="/docs" class="px-3 py-2 text-sm font-medium text-white transition-colors rounded-md hover:text-blue-200">
1041
+ <a href="/docs" className="px-3 py-2 text-sm font-medium text-white transition-colors rounded-md hover:text-blue-200">
1039
1042
  Docs
1040
1043
  </a>
1041
1044
  </div>
@@ -1044,23 +1047,23 @@ def Home(props=None):
1044
1047
  </nav>
1045
1048
 
1046
1049
  {/* Hero Section */}
1047
- <div class="relative overflow-hidden">
1048
- <div class="mx-auto max-w-7xl">
1049
- <div class="relative z-10 pb-8 bg-transparent sm:pb-16 md:pb-20 lg:pb-28 xl:pb-32">
1050
- <main class="mx-auto mt-10 max-w-7xl sm:mt-12 sm:px-6 lg:mt-16 lg:px-8 xl:mt-20">
1051
- <div class="text-center">
1052
- <h1 class="text-4xl font-extrabold tracking-tight text-white sm:text-5xl md:text-6xl">
1053
- <span class="block xl:inline">Build amazing web apps with</span>
1054
- <span class="block text-blue-200 xl:inline">Python and True JSX</span>
1050
+ <div className="relative overflow-hidden">
1051
+ <div className="mx-auto max-w-7xl">
1052
+ <div className="relative z-10 pb-8 bg-transparent sm:pb-16 md:pb-20 lg:pb-28 xl:pb-32">
1053
+ <main className="mx-auto mt-10 max-w-7xl sm:mt-12 sm:px-6 lg:mt-16 lg:px-8 xl:mt-20">
1054
+ <div className="text-center">
1055
+ <h1 className="text-4xl font-extrabold tracking-tight text-white sm:text-5xl md:text-6xl">
1056
+ <span className="block xl:inline">Build amazing web apps with</span>
1057
+ <span className="block text-blue-200 xl:inline">Python and True JSX</span>
1055
1058
  </h1>
1056
- <p class="max-w-lg mx-auto mt-6 text-xl text-blue-100 sm:text-2xl">
1059
+ <p className="max-w-lg mx-auto mt-6 text-xl text-blue-100 sm:text-2xl">
1057
1060
  {message}
1058
1061
  </p>
1059
- <div class="flex justify-center mt-10">
1060
- <a href="/getting-started" class="inline-flex items-center justify-center px-8 py-3 text-base font-medium text-blue-600 transition-all duration-300 transform bg-white border border-transparent rounded-md hover:bg-blue-50 md:py-4 md:text-lg md:px-10 hover:scale-105">
1062
+ <div className="flex justify-center mt-10">
1063
+ <a href="/getting-started" className="inline-flex items-center justify-center px-8 py-3 text-base font-medium text-blue-600 transition-all duration-300 transform bg-white border border-transparent rounded-md hover:bg-blue-50 md:py-4 md:text-lg md:px-10 hover:scale-105">
1061
1064
  Get Started
1062
1065
  </a>
1063
- <a href="https://github.com/nextpy/nextpy" class="inline-flex items-center justify-center px-8 py-3 ml-4 text-base font-medium text-white transition-all duration-300 transform bg-blue-500 border border-transparent rounded-md hover:bg-blue-600 md:py-4 md:text-lg md:px-10 hover:scale-105">
1066
+ <a href="https://github.com/nextpy/nextpy" className="inline-flex items-center justify-center px-8 py-3 ml-4 text-base font-medium text-white transition-all duration-300 transform bg-blue-500 border border-transparent rounded-md hover:bg-blue-600 md:py-4 md:text-lg md:px-10 hover:scale-105">
1064
1067
  GitHub
1065
1068
  </a>
1066
1069
  </div>
@@ -1070,80 +1073,80 @@ def Home(props=None):
1070
1073
  </div>
1071
1074
 
1072
1075
  {/* Background decoration */}
1073
- <div class="absolute inset-0 -z-10">
1074
- <div class="absolute top-0 transform -translate-x-1/2 left-1/2 blur-3xl opacity-20">
1075
- <div class="rounded-full aspect-square w-96 h-96 bg-gradient-to-r from-blue-400 to-purple-600"></div>
1076
+ <div className="absolute inset-0 -z-10">
1077
+ <div className="absolute top-0 transform -translate-x-1/2 left-1/2 blur-3xl opacity-20">
1078
+ <div className="rounded-full aspect-square w-96 h-96 bg-gradient-to-r from-blue-400 to-purple-600"></div>
1076
1079
  </div>
1077
- <div class="absolute top-0 transform translate-x-1/2 right-1/2 blur-3xl opacity-20">
1078
- <div class="rounded-full aspect-square w-96 h-96 bg-gradient-to-r from-purple-400 to-pink-600"></div>
1080
+ <div className="absolute top-0 transform translate-x-1/2 right-1/2 blur-3xl opacity-20">
1081
+ <div className="rounded-full aspect-square w-96 h-96 bg-gradient-to-r from-purple-400 to-pink-600"></div>
1079
1082
  </div>
1080
1083
  </div>
1081
1084
  </div>
1082
1085
 
1083
1086
  {/* Features Section */}
1084
- <div class="py-12 bg-white">
1085
- <div class="px-4 mx-auto max-w-7xl sm:px-6 lg:px-8">
1086
- <div class="lg:text-center">
1087
- <h2 class="text-base font-semibold tracking-wide text-blue-600 uppercase">
1087
+ <div className="py-12 bg-white">
1088
+ <div className="px-4 mx-auto max-w-7xl sm:px-6 lg:px-8">
1089
+ <div className="lg:text-center">
1090
+ <h2 className="text-base font-semibold tracking-wide text-blue-600 uppercase">
1088
1091
  Features
1089
1092
  </h2>
1090
- <p class="mt-2 text-3xl font-extrabold tracking-tight text-gray-900 sm:text-4xl">
1093
+ <p className="mt-2 text-3xl font-extrabold tracking-tight text-gray-900 sm:text-4xl">
1091
1094
  Everything you need to build amazing apps
1092
1095
  </p>
1093
1096
  </div>
1094
1097
 
1095
- <div class="mt-10">
1096
- <div class="space-y-10 md:space-y-0 md:grid md:grid-cols-2 md:gap-x-8 md:gap-y-10 lg:grid-cols-3">
1098
+ <div className="mt-10">
1099
+ <div className="space-y-10 md:space-y-0 md:grid md:grid-cols-2 md:gap-x-8 md:gap-y-10 lg:grid-cols-3">
1097
1100
  {/* Feature 1 */}
1098
- <div class="relative">
1099
- <div class="absolute flex items-center justify-center w-12 h-12 text-white bg-blue-500 rounded-md">
1100
- <svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
1101
+ <div className="relative">
1102
+ <div className="absolute flex items-center justify-center w-12 h-12 text-white bg-blue-500 rounded-md">
1103
+ <svg className="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
1101
1104
  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7m0 0v7l9-11h-7z" />
1102
1105
  </svg>
1103
1106
  </div>
1104
- <p class="ml-16 text-lg font-medium leading-6 text-gray-900">
1107
+ <p className="ml-16 text-lg font-medium leading-6 text-gray-900">
1105
1108
  True JSX Components
1106
1109
  </p>
1107
- <p class="mt-2 ml-16 text-base text-gray-500">
1110
+ <p className="mt-2 ml-16 text-base text-gray-500">
1108
1111
  Write React-like components directly in Python with full JSX support.
1109
1112
  </p>
1110
- <a href="/jsx-demo" class="mt-4 ml-16 text-base font-medium text-blue-600 hover:text-blue-500">
1113
+ <a href="/jsx-demo" className="mt-4 ml-16 text-base font-medium text-blue-600 hover:text-blue-500">
1111
1114
  Learn more →
1112
1115
  </a>
1113
1116
  </div>
1114
1117
 
1115
1118
  {/* Feature 2 */}
1116
- <div class="relative">
1117
- <div class="absolute flex items-center justify-center w-12 h-12 text-white bg-purple-500 rounded-md">
1118
- <svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
1119
+ <div className="relative">
1120
+ <div className="absolute flex items-center justify-center w-12 h-12 text-white bg-purple-500 rounded-md">
1121
+ <svg className="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
1119
1122
  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7" />
1120
1123
  </svg>
1121
1124
  </div>
1122
- <p class="ml-16 text-lg font-medium leading-6 text-gray-900">
1125
+ <p className="ml-16 text-lg font-medium leading-6 text-gray-900">
1123
1126
  Tailwind CSS Integration
1124
1127
  </p>
1125
- <p class="mt-2 ml-16 text-base text-gray-500">
1128
+ <p className="mt-2 ml-16 text-base text-gray-500">
1126
1129
  Built-in Tailwind CSS v4 with PostCSS compilation and utility classes.
1127
1130
  </p>
1128
- <a href="/tailwind-demo" class="mt-4 ml-16 text-base font-medium text-blue-600 hover:text-blue-500">
1131
+ <a href="/tailwind-demo" className="mt-4 ml-16 text-base font-medium text-blue-600 hover:text-blue-500">
1129
1132
  Learn more →
1130
1133
  </a>
1131
1134
  </div>
1132
1135
 
1133
1136
  {/* Feature 3 */}
1134
- <div class="relative">
1135
- <div class="absolute flex items-center justify-center w-12 h-12 text-white bg-green-500 rounded-md">
1136
- <svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
1137
+ <div className="relative">
1138
+ <div className="absolute flex items-center justify-center w-12 h-12 text-white bg-green-500 rounded-md">
1139
+ <svg className="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
1137
1140
  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 2 9 9 0 0118 0z" />
1138
1141
  </svg>
1139
1142
  </div>
1140
- <p class="ml-16 text-lg font-medium leading-6 text-gray-900">
1143
+ <p className="ml-16 text-lg font-medium leading-6 text-gray-900">
1141
1144
  File-based Routing
1142
1145
  </p>
1143
- <p class="mt-2 ml-16 text-base text-gray-500">
1146
+ <p className="mt-2 ml-16 text-base text-gray-500">
1144
1147
  Automatic route discovery with support for dynamic routes and API endpoints.
1145
1148
  </p>
1146
- <a href="/routing-demo" class="mt-4 ml-16 text-base font-medium text-blue-600 hover:text-blue-500">
1149
+ <a href="/routing-demo" className="mt-4 ml-16 text-base font-medium text-blue-600 hover:text-blue-500">
1147
1150
  Learn more →
1148
1151
  </a>
1149
1152
  </div>
@@ -1153,51 +1156,51 @@ def Home(props=None):
1153
1156
  </div>
1154
1157
 
1155
1158
  {/* Interactive Demo Section */}
1156
- <div class="py-12 bg-gray-50">
1157
- <div class="px-4 mx-auto max-w-7xl sm:px-6 lg:px-8">
1158
- <div class="text-center">
1159
- <h2 class="text-3xl font-extrabold text-gray-900">
1159
+ <div className="py-12 bg-gray-50">
1160
+ <div className="px-4 mx-auto max-w-7xl sm:px-6 lg:px-8">
1161
+ <div className="text-center">
1162
+ <h2 className="text-3xl font-extrabold text-gray-900">
1160
1163
  Try It Yourself
1161
1164
  </h2>
1162
- <p class="max-w-2xl mt-4 text-xl text-gray-500">
1165
+ <p className="max-w-2xl mt-4 text-xl text-gray-500">
1163
1166
  Interactive demos showing NextPy capabilities
1164
1167
  </p>
1165
1168
  </div>
1166
1169
 
1167
- <div class="grid grid-cols-1 gap-8 mt-12 sm:grid-cols-2 lg:grid-cols-3">
1170
+ <div className="grid grid-cols-1 gap-8 mt-12 sm:grid-cols-2 lg:grid-cols-3">
1168
1171
  {/* Interactive Counter */}
1169
- <div class="p-6 bg-white rounded-lg shadow-lg">
1170
- <h3 class="text-lg font-medium text-gray-900">Live Counter</h3>
1171
- <p class="mt-2 text-sm text-gray-500">Interactive state management demo</p>
1172
- <div class="mt-4">
1173
- <button class="px-4 py-2 text-white transition-colors bg-blue-500 rounded hover:bg-blue-600">
1172
+ <div className="p-6 bg-white rounded-lg shadow-lg">
1173
+ <h3 className="text-lg font-medium text-gray-900">Live Counter</h3>
1174
+ <p className="mt-2 text-sm text-gray-500">Interactive state management demo</p>
1175
+ <div className="mt-4">
1176
+ <button className="px-4 py-2 text-white transition-colors bg-blue-500 rounded hover:bg-blue-600">
1174
1177
  Click me!
1175
1178
  </button>
1176
- <span class="ml-4 text-lg font-semibold">Count: 0</span>
1179
+ <span className="ml-4 text-lg font-semibold">Count: 0</span>
1177
1180
  </div>
1178
1181
  </div>
1179
1182
 
1180
1183
  {/* Form Demo */}
1181
- <div class="p-6 bg-white rounded-lg shadow-lg">
1182
- <h3 class="text-lg font-medium text-gray-900">Form Handling</h3>
1183
- <p class="mt-2 text-sm text-gray-500">Server-side form processing</p>
1184
- <div class="mt-4">
1185
- <input type="text" placeholder="Type something..." class="w-full px-3 py-2 border border-gray-300 rounded-md" />
1186
- <button class="w-full px-4 py-2 mt-2 text-white transition-colors bg-green-500 rounded hover:bg-green-600">
1184
+ <div className="p-6 bg-white rounded-lg shadow-lg">
1185
+ <h3 className="text-lg font-medium text-gray-900">Form Handling</h3>
1186
+ <p className="mt-2 text-sm text-gray-500">Server-side form processing</p>
1187
+ <div className="mt-4">
1188
+ <input type="text" placeholder="Type something..." className="w-full px-3 py-2 border border-gray-300 rounded-md" />
1189
+ <button className="w-full px-4 py-2 mt-2 text-white transition-colors bg-green-500 rounded hover:bg-green-600">
1187
1190
  Submit
1188
1191
  </button>
1189
1192
  </div>
1190
1193
  </div>
1191
1194
 
1192
1195
  {/* API Demo */}
1193
- <div class="p-6 bg-white rounded-lg shadow-lg">
1194
- <h3 class="text-lg font-medium text-gray-900">API Integration</h3>
1195
- <p class="mt-2 text-sm text-gray-500">RESTful API endpoints</p>
1196
- <div class="mt-4">
1197
- <button class="w-full px-4 py-2 text-white transition-colors bg-purple-500 rounded hover:bg-purple-600">
1196
+ <div className="p-6 bg-white rounded-lg shadow-lg">
1197
+ <h3 className="text-lg font-medium text-gray-900">API Integration</h3>
1198
+ <p className="mt-2 text-sm text-gray-500">RESTful API endpoints</p>
1199
+ <div className="mt-4">
1200
+ <button className="w-full px-4 py-2 text-white transition-colors bg-purple-500 rounded hover:bg-purple-600">
1198
1201
  Call API
1199
1202
  </button>
1200
- <div class="mt-2 text-xs text-gray-600">Response will appear here</div>
1203
+ <div className="mt-2 text-xs text-gray-600">Response will appear here</div>
1201
1204
  </div>
1202
1205
  </div>
1203
1206
  </div>
@@ -1205,16 +1208,16 @@ def Home(props=None):
1205
1208
  </div>
1206
1209
 
1207
1210
  {/* Footer */}
1208
- <footer class="bg-gray-900">
1209
- <div class="px-4 py-12 mx-auto max-w-7xl sm:px-6 lg:px-8">
1210
- <div class="flex flex-col items-center space-y-4">
1211
- <p class="text-base text-center text-gray-400">
1211
+ <footer className="bg-gray-900">
1212
+ <div className="px-4 py-12 mx-auto max-w-7xl sm:px-6 lg:px-8">
1213
+ <div className="flex flex-col items-center space-y-4">
1214
+ <p className="text-base text-center text-gray-400">
1212
1215
  Built with ❤️ using NextPy Framework
1213
1216
  </p>
1214
- <div class="flex space-x-6">
1215
- <a href="/about" class="text-gray-400 hover:text-gray-300">About</a>
1216
- <a href="/docs" class="text-gray-400 hover:text-gray-300">Documentation</a>
1217
- <a href="https://github.com/nextpy/nextpy" class="text-gray-400 hover:text-gray-300">GitHub</a>
1217
+ <div className="flex space-x-6">
1218
+ <a href="/about" className="text-gray-400 hover:text-gray-300">About</a>
1219
+ <a href="/docs" className="text-gray-400 hover:text-gray-300">Documentation</a>
1220
+ <a href="https://github.com/nextpy/nextpy" className="text-gray-400 hover:text-gray-300">GitHub</a>
1218
1221
  </div>
1219
1222
  </div>
1220
1223
  </div>
@@ -1245,22 +1248,22 @@ def About(props=None):
1245
1248
  description = props.get("description", "The Python web framework that brings React-like development to Python")
1246
1249
 
1247
1250
  return (
1248
- <div class="min-h-screen bg-gray-50">
1251
+ <div className="min-h-screen bg-gray-50">
1249
1252
  {/* Hero Section */}
1250
- <div class="text-white bg-gradient-to-r from-blue-600 to-purple-600">
1251
- <div class="px-4 py-16 mx-auto max-w-7xl sm:py-24 sm:px-6 lg:px-8">
1252
- <div class="text-center">
1253
- <h1 class="text-4xl font-extrabold tracking-tight sm:text-5xl lg:text-6xl">
1253
+ <div className="text-white bg-gradient-to-r from-blue-600 to-purple-600">
1254
+ <div className="px-4 py-16 mx-auto max-w-7xl sm:py-24 sm:px-6 lg:px-8">
1255
+ <div className="text-center">
1256
+ <h1 className="text-4xl font-extrabold tracking-tight sm:text-5xl lg:text-6xl">
1254
1257
  {title}
1255
1258
  </h1>
1256
- <p class="max-w-2xl mx-auto mt-6 text-xl text-blue-100">
1259
+ <p className="max-w-2xl mx-auto mt-6 text-xl text-blue-100">
1257
1260
  {description}
1258
1261
  </p>
1259
- <div class="flex justify-center mt-10 space-x-4">
1260
- <a href="/features" class="inline-flex items-center justify-center px-8 py-3 text-base font-medium text-blue-600 bg-white border border-transparent rounded-md hover:bg-blue-50 md:py-4 md:text-lg md:px-10">
1262
+ <div className="flex justify-center mt-10 space-x-4">
1263
+ <a href="/features" className="inline-flex items-center justify-center px-8 py-3 text-base font-medium text-blue-600 bg-white border border-transparent rounded-md hover:bg-blue-50 md:py-4 md:text-lg md:px-10">
1261
1264
  Explore Features
1262
1265
  </a>
1263
- <a href="/getting-started" class="inline-flex items-center justify-center px-8 py-3 text-base font-medium text-white bg-blue-500 border border-transparent rounded-md hover:bg-blue-600 md:py-4 md:text-lg md:px-10">
1266
+ <a href="/getting-started" className="inline-flex items-center justify-center px-8 py-3 text-base font-medium text-white bg-blue-500 border border-transparent rounded-md hover:bg-blue-600 md:py-4 md:text-lg md:px-10">
1264
1267
  Get Started
1265
1268
  </a>
1266
1269
  </div>
@@ -1269,93 +1272,93 @@ def About(props=None):
1269
1272
  </div>
1270
1273
 
1271
1274
  {/* Features Grid */}
1272
- <div class="py-12 bg-white">
1273
- <div class="px-4 mx-auto max-w-7xl sm:px-6 lg:px-8">
1274
- <div class="lg:text-center">
1275
- <h2 class="text-base font-semibold tracking-wide text-blue-600 uppercase">
1275
+ <div className="py-12 bg-white">
1276
+ <div className="px-4 mx-auto max-w-7xl sm:px-6 lg:px-8">
1277
+ <div className="lg:text-center">
1278
+ <h2 className="text-base font-semibold tracking-wide text-blue-600 uppercase">
1276
1279
  Why Choose NextPy?
1277
1280
  </h2>
1278
- <p class="mt-2 text-3xl font-extrabold tracking-tight text-gray-900 sm:text-4xl">
1281
+ <p className="mt-2 text-3xl font-extrabold tracking-tight text-gray-900 sm:text-4xl">
1279
1282
  Everything you need to build modern web applications
1280
1283
  </p>
1281
1284
  </div>
1282
1285
 
1283
- <div class="mt-10">
1284
- <div class="gap-8 space-y-10 md:space-y-0 md:grid md:grid-cols-2 lg:grid-cols-3">
1286
+ <div className="mt-10">
1287
+ <div className="gap-8 space-y-10 md:space-y-0 md:grid md:grid-cols-2 lg:grid-cols-3">
1285
1288
  {/* Feature 1 */}
1286
- <div class="relative">
1287
- <div class="absolute flex items-center justify-center w-12 h-12 text-white bg-blue-500 rounded-md">
1288
- <svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
1289
+ <div className="relative">
1290
+ <div className="absolute flex items-center justify-center w-12 h-12 text-white bg-blue-500 rounded-md">
1291
+ <svg className="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
1289
1292
  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7m0 0v7l9-11h-7z" />
1290
1293
  </svg>
1291
1294
  </div>
1292
- <h3 class="ml-16 text-lg font-medium leading-6 text-gray-900">True JSX Support</h3>
1293
- <p class="mt-2 ml-16 text-base text-gray-500">
1295
+ <h3 className="ml-16 text-lg font-medium leading-6 text-gray-900">True JSX Support</h3>
1296
+ <p className="mt-2 ml-16 text-base text-gray-500">
1294
1297
  Write React-like components with JSX syntax directly in Python. No transpilation needed.
1295
1298
  </p>
1296
1299
  </div>
1297
1300
 
1298
1301
  {/* Feature 2 */}
1299
- <div class="relative">
1300
- <div class="absolute flex items-center justify-center w-12 h-12 text-white bg-purple-500 rounded-md">
1301
- <svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
1302
+ <div className="relative">
1303
+ <div className="absolute flex items-center justify-center w-12 h-12 text-white bg-purple-500 rounded-md">
1304
+ <svg className="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
1302
1305
  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7" />
1303
1306
  </svg>
1304
1307
  </div>
1305
- <h3 class="ml-16 text-lg font-medium leading-6 text-gray-900">File-based Routing</h3>
1306
- <p class="mt-2 ml-16 text-base text-gray-500">
1308
+ <h3 className="ml-16 text-lg font-medium leading-6 text-gray-900">File-based Routing</h3>
1309
+ <p className="mt-2 ml-16 text-base text-gray-500">
1307
1310
  Automatic route discovery with support for dynamic routes and API endpoints.
1308
1311
  </p>
1309
1312
  </div>
1310
1313
 
1311
1314
  {/* Feature 3 */}
1312
- <div class="relative">
1313
- <div class="absolute flex items-center justify-center w-12 h-12 text-white bg-green-500 rounded-md">
1314
- <svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
1315
+ <div className="relative">
1316
+ <div className="absolute flex items-center justify-center w-12 h-12 text-white bg-green-500 rounded-md">
1317
+ <svg className="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
1315
1318
  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 2 9 9 0 0118 0z" />
1316
1319
  </svg>
1317
1320
  </div>
1318
- <h3 class="ml-16 text-lg font-medium leading-6 text-gray-900">Tailwind CSS Integration</h3>
1319
- <p class="mt-2 ml-16 text-base text-gray-500">
1321
+ <h3 className="ml-16 text-lg font-medium leading-6 text-gray-900">Tailwind CSS Integration</h3>
1322
+ <p className="mt-2 ml-16 text-base text-gray-500">
1320
1323
  Built-in Tailwind CSS v4 with PostCSS compilation and utility classes.
1321
1324
  </p>
1322
1325
  </div>
1323
1326
 
1324
1327
  {/* Feature 4 */}
1325
- <div class="relative">
1326
- <div class="absolute flex items-center justify-center w-12 h-12 text-white bg-red-500 rounded-md">
1327
- <svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
1328
+ <div className="relative">
1329
+ <div className="absolute flex items-center justify-center w-12 h-12 text-white bg-red-500 rounded-md">
1330
+ <svg className="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
1328
1331
  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7m0 0v7l9-11h-7z" />
1329
1332
  </svg>
1330
1333
  </div>
1331
- <h3 class="ml-16 text-lg font-medium leading-6 text-gray-900">Server-side Rendering</h3>
1332
- <p class="mt-2 ml-16 text-base text-gray-500">
1334
+ <h3 className="ml-16 text-lg font-medium leading-6 text-gray-900">Server-side Rendering</h3>
1335
+ <p className="mt-2 ml-16 text-base text-gray-500">
1333
1336
  Fast initial page loads with server-side rendering and data fetching.
1334
1337
  </p>
1335
1338
  </div>
1336
1339
 
1337
1340
  {/* Feature 5 */}
1338
- <div class="relative">
1339
- <div class="absolute flex items-center justify-center w-12 h-12 text-white bg-yellow-500 rounded-md">
1340
- <svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
1341
+ <div className="relative">
1342
+ <div className="absolute flex items-center justify-center w-12 h-12 text-white bg-yellow-500 rounded-md">
1343
+ <svg className="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
1341
1344
  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 00-1.065 2.572c1.756.426 1.756 2.924 0 3.35-1.756a1.724 1.724 0 00-1.066-2.573c1.756-.426 1.756-2.924 0-3.35 1.756a1.724 1.724 0 00-2.573-1.066c-1.756.426-1.756-2.924 0-3.35 1.756A1.724 1.724 0 006.573 2.572C3.31 7.76 1.574 8.686 4.317 8.686a1.724 1.724 0 00-1.066-2.572c1.756-.426 1.756-2.924 0-3.35 1.756a1.724 1.724 0 00-2.573-1.066c-1.756.426-1.756-2.924 0-3.35 1.756A1.724 1.724 0 001.066 2.572c1.756.426 1.756 2.924 0 3.35-1.756a1.724 1.724 0 002.573 1.066z" />
1342
1345
  </svg>
1343
1346
  </div>
1344
- <h3 class="ml-16 text-lg font-medium leading-6 text-gray-900">Hot Reload Development</h3>
1345
- <p class="mt-2 ml-16 text-base text-gray-500">
1347
+ <h3 className="ml-16 text-lg font-medium leading-6 text-gray-900">Hot Reload Development</h3>
1348
+ <p className="mt-2 ml-16 text-base text-gray-500">
1346
1349
  Instant hot reload when saving files with Watchdog integration.
1347
1350
  </p>
1348
1351
  </div>
1349
1352
 
1350
1353
  {/* Feature 6 */}
1351
- <div class="relative">
1352
- <div class="absolute flex items-center justify-center w-12 h-12 text-white bg-indigo-500 rounded-md">
1353
- <svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
1354
+ <div className="relative">
1355
+ <div className="absolute flex items-center justify-center w-12 h-12 text-white bg-indigo-500 rounded-md">
1356
+ <svg className="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
1354
1357
  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
1355
1358
  </svg>
1356
1359
  </div>
1357
- <h3 class="ml-16 text-lg font-medium leading-6 text-gray-900">API Routes</h3>
1358
- <p class="mt-2 ml-16 text-base text-gray-500">
1360
+ <h3 className="ml-16 text-lg font-medium leading-6 text-gray-900">API Routes</h3>
1361
+ <p className="mt-2 ml-16 text-base text-gray-500">
1359
1362
  Built-in FastAPI support for creating RESTful API endpoints.
1360
1363
  </p>
1361
1364
  </div>
@@ -1365,59 +1368,59 @@ def About(props=None):
1365
1368
  </div>
1366
1369
 
1367
1370
  {/* Interactive Demo Section */}
1368
- <div class="py-12 bg-gray-50">
1369
- <div class="px-4 mx-auto max-w-7xl sm:px-6 lg:px-8">
1370
- <div class="text-center">
1371
- <h2 class="text-3xl font-extrabold text-gray-900">
1371
+ <div className="py-12 bg-gray-50">
1372
+ <div className="px-4 mx-auto max-w-7xl sm:px-6 lg:px-8">
1373
+ <div className="text-center">
1374
+ <h2 className="text-3xl font-extrabold text-gray-900">
1372
1375
  See It In Action
1373
1376
  </h2>
1374
- <p class="max-w-2xl mt-4 text-xl text-gray-500">
1377
+ <p className="max-w-2xl mt-4 text-xl text-gray-500">
1375
1378
  Try these interactive demos to experience NextPy capabilities
1376
1379
  </p>
1377
1380
  </div>
1378
1381
 
1379
- <div class="grid grid-cols-1 gap-8 mt-12 sm:grid-cols-2 lg:grid-cols-3">
1382
+ <div className="grid grid-cols-1 gap-8 mt-12 sm:grid-cols-2 lg:grid-cols-3">
1380
1383
  {/* JSX Demo */}
1381
- <div class="p-6 transition-shadow bg-white rounded-lg shadow-lg hover:shadow-xl">
1382
- <div class="text-center">
1383
- <div class="flex items-center justify-center w-12 h-12 mx-auto mb-4 text-white bg-blue-500 rounded-md">
1384
- <svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
1384
+ <div className="p-6 transition-shadow bg-white rounded-lg shadow-lg hover:shadow-xl">
1385
+ <div className="text-center">
1386
+ <div className="flex items-center justify-center w-12 h-12 mx-auto mb-4 text-white bg-blue-500 rounded-md">
1387
+ <svg className="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
1385
1388
  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7m0 0v7l9-11h-7z" />
1386
1389
  </svg>
1387
1390
  </div>
1388
- <h3 class="mb-2 text-lg font-medium text-gray-900">JSX Components</h3>
1389
- <p class="mb-4 text-sm text-gray-500">Interactive component demo</p>
1390
- <button onclick="alert('Hello from JSX!')" class="w-full px-4 py-2 text-white transition-colors bg-blue-500 rounded hover:bg-blue-600">
1391
+ <h3 className="mb-2 text-lg font-medium text-gray-900">JSX Components</h3>
1392
+ <p className="mb-4 text-sm text-gray-500">Interactive component demo</p>
1393
+ <button onclick="alert('Hello from JSX!')" className="w-full px-4 py-2 text-white transition-colors bg-blue-500 rounded hover:bg-blue-600">
1391
1394
  Try JSX Demo
1392
1395
  </button>
1393
1396
  </div>
1394
1397
 
1395
1398
  {/* Tailwind Demo */}
1396
- <div class="p-6 transition-shadow bg-white rounded-lg shadow-lg hover:shadow-xl">
1397
- <div class="text-center">
1398
- <div class="flex items-center justify-center w-12 h-12 mx-auto mb-4 text-white bg-purple-500 rounded-md">
1399
- <svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
1399
+ <div className="p-6 transition-shadow bg-white rounded-lg shadow-lg hover:shadow-xl">
1400
+ <div className="text-center">
1401
+ <div className="flex items-center justify-center w-12 h-12 mx-auto mb-4 text-white bg-purple-500 rounded-md">
1402
+ <svg className="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
1400
1403
  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7" />
1401
1404
  </svg>
1402
1405
  </div>
1403
- <h3 class="mb-2 text-lg font-medium text-gray-900">Tailwind CSS</h3>
1404
- <p class="mb-4 text-sm text-gray-500">Beautiful styling with utility classes</p>
1405
- <button class="w-full px-4 py-2 text-white transition-colors bg-purple-500 rounded hover:bg-purple-600">
1406
+ <h3 className="mb-2 text-lg font-medium text-gray-900">Tailwind CSS</h3>
1407
+ <p className="mb-4 text-sm text-gray-500">Beautiful styling with utility classes</p>
1408
+ <button className="w-full px-4 py-2 text-white transition-colors bg-purple-500 rounded hover:bg-purple-600">
1406
1409
  Try Tailwind Demo
1407
1410
  </button>
1408
1411
  </div>
1409
1412
 
1410
1413
  {/* API Demo */}
1411
- <div class="p-6 transition-shadow bg-white rounded-lg shadow-lg hover:shadow-xl">
1412
- <div class="text-center">
1413
- <div class="flex items-center justify-center w-12 h-12 mx-auto mb-4 text-white bg-green-500 rounded-md">
1414
- <svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
1414
+ <div className="p-6 transition-shadow bg-white rounded-lg shadow-lg hover:shadow-xl">
1415
+ <div className="text-center">
1416
+ <div className="flex items-center justify-center w-12 h-12 mx-auto mb-4 text-white bg-green-500 rounded-md">
1417
+ <svg className="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
1415
1418
  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 2 9 9 0 0118 0z" />
1416
1419
  </svg>
1417
1420
  </div>
1418
- <h3 class="mb-2 text-lg font-medium text-gray-900">API Integration</h3>
1419
- <p class="mb-4 text-sm text-gray-500">RESTful API endpoints</p>
1420
- <button class="w-full px-4 py-2 text-white transition-colors bg-green-500 rounded hover:bg-green-600">
1421
+ <h3 className="mb-2 text-lg font-medium text-gray-900">API Integration</h3>
1422
+ <p className="mb-4 text-sm text-gray-500">RESTful API endpoints</p>
1423
+ <button className="w-full px-4 py-2 text-white transition-colors bg-green-500 rounded hover:bg-green-600">
1421
1424
  Try API Demo
1422
1425
  </button>
1423
1426
  </div>
@@ -1427,41 +1430,41 @@ def About(props=None):
1427
1430
  </div>
1428
1431
 
1429
1432
  {/* Stats Section */}
1430
- <div class="bg-blue-600">
1431
- <div class="px-4 py-12 mx-auto max-w-7xl sm:px-6 lg:px-8">
1432
- <div class="grid grid-cols-2 gap-8 lg:grid-cols-4">
1433
- <div class="text-center">
1434
- <div class="text-3xl font-extrabold text-white">10x</div>
1435
- <div class="mt-2 text-lg text-blue-200">Faster Development</div>
1433
+ <div className="bg-blue-600">
1434
+ <div className="px-4 py-12 mx-auto max-w-7xl sm:px-6 lg:px-8">
1435
+ <div className="grid grid-cols-2 gap-8 lg:grid-cols-4">
1436
+ <div className="text-center">
1437
+ <div className="text-3xl font-extrabold text-white">10x</div>
1438
+ <div className="mt-2 text-lg text-blue-200">Faster Development</div>
1436
1439
  </div>
1437
- <div class="text-center">
1438
- <div class="text-3xl font-extrabold text-white">100%</div>
1439
- <div class="mt-2 text-lg text-blue-200">Python Compatible</div>
1440
+ <div className="text-center">
1441
+ <div className="text-3xl font-extrabold text-white">100%</div>
1442
+ <div className="mt-2 text-lg text-blue-200">Python Compatible</div>
1440
1443
  </div>
1441
- <div class="text-center">
1442
- <div class="text-3xl font-extrabold text-white">JSX</div>
1443
- <div class="mt-2 text-lg text-blue-200">Modern Syntax</div>
1444
+ <div className="text-center">
1445
+ <div className="text-3xl font-extrabold text-white">JSX</div>
1446
+ <div className="mt-2 text-lg text-blue-200">Modern Syntax</div>
1444
1447
  </div>
1445
- <div class="text-center">
1446
- <div class="text-3xl font-extrabold text-white">∞</div>
1447
- <div class="mt-2 text-lg text-blue-200">Infinite Possibilities</div>
1448
+ <div className="text-center">
1449
+ <div className="text-3xl font-extrabold text-white">∞</div>
1450
+ <div className="mt-2 text-lg text-blue-200">Infinite Possibilities</div>
1448
1451
  </div>
1449
1452
  </div>
1450
1453
  </div>
1451
1454
  </div>
1452
1455
 
1453
1456
  {/* Footer */}
1454
- <footer class="bg-gray-900">
1455
- <div class="px-4 py-8 mx-auto max-w-7xl sm:px-6 lg:px-8">
1456
- <div class="flex flex-col items-center space-y-4">
1457
- <p class="text-base text-center text-gray-400">
1457
+ <footer className="bg-gray-900">
1458
+ <div className="px-4 py-8 mx-auto max-w-7xl sm:px-6 lg:px-8">
1459
+ <div className="flex flex-col items-center space-y-4">
1460
+ <p className="text-base text-center text-gray-400">
1458
1461
  Built with ❤️ using NextPy Framework
1459
1462
  </p>
1460
- <div class="flex space-x-6">
1461
- <a href="/" class="text-gray-400 hover:text-gray-300">Home</a>
1462
- <a href="/features" class="text-gray-400 hover:text-gray-300">Features</a>
1463
- <a href="/docs" class="text-gray-400 hover:text-gray-300">Documentation</a>
1464
- <a href="https://github.com/nextpy/nextpy" class="text-gray-400 hover:text-gray-300">GitHub</a>
1463
+ <div className="flex space-x-6">
1464
+ <a href="/" className="text-gray-400 hover:text-gray-300">Home</a>
1465
+ <a href="/features" className="text-gray-400 hover:text-gray-300">Features</a>
1466
+ <a href="/docs" className="text-gray-400 hover:text-gray-300">Documentation</a>
1467
+ <a href="https://github.com/nextpy/nextpy" className="text-gray-400 hover:text-gray-300">GitHub</a>
1465
1468
  </div>
1466
1469
  </div>
1467
1470
  </div>
@@ -1487,26 +1490,26 @@ default = About
1487
1490
  def InteractiveDemo(props=None):
1488
1491
  """Interactive demo showcasing NextPy capabilities"""
1489
1492
  return (
1490
- <div class="min-h-screen py-12 bg-gradient-to-br from-indigo-50 to-purple-100">
1491
- <div class="px-4 mx-auto max-w-7xl sm:px-6 lg:px-8">
1492
- <h1 class="mb-12 text-4xl font-extrabold text-center text-gray-900">
1493
+ <div className="min-h-screen py-12 bg-gradient-to-br from-indigo-50 to-purple-100">
1494
+ <div className="px-4 mx-auto max-w-7xl sm:px-6 lg:px-8">
1495
+ <h1 className="mb-12 text-4xl font-extrabold text-center text-gray-900">
1493
1496
  Interactive NextPy Demos
1494
1497
  </h1>
1495
1498
 
1496
- <div class="grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-3">
1499
+ <div className="grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-3">
1497
1500
  {/* Counter Demo */}
1498
- <div class="p-6 bg-white shadow-lg rounded-xl">
1499
- <h2 class="mb-4 text-2xl font-bold text-gray-900">Live Counter</h2>
1500
- <div class="text-center">
1501
- <div class="mb-4 text-6xl font-bold text-blue-600" id="counter">0</div>
1502
- <div class="space-x-4">
1503
- <button onclick="updateCounter(-1)" class="px-6 py-3 text-white transition-colors bg-red-500 rounded-lg hover:bg-red-600">
1501
+ <div className="p-6 bg-white shadow-lg rounded-xl">
1502
+ <h2 className="mb-4 text-2xl font-bold text-gray-900">Live Counter</h2>
1503
+ <div className="text-center">
1504
+ <div className="mb-4 text-6xl font-bold text-blue-600" id="counter">0</div>
1505
+ <div className="space-x-4">
1506
+ <button onclick="updateCounter(-1)" className="px-6 py-3 text-white transition-colors bg-red-500 rounded-lg hover:bg-red-600">
1504
1507
  -
1505
1508
  </button>
1506
- <button onclick="updateCounter(1)" class="px-6 py-3 text-white transition-colors bg-green-500 rounded-lg hover:bg-green-600">
1509
+ <button onclick="updateCounter(1)" className="px-6 py-3 text-white transition-colors bg-green-500 rounded-lg hover:bg-green-600">
1507
1510
  +
1508
1511
  </button>
1509
- <button onclick="resetCounter()" class="px-6 py-3 text-white transition-colors bg-gray-500 rounded-lg hover:bg-gray-600">
1512
+ <button onclick="resetCounter()" className="px-6 py-3 text-white transition-colors bg-gray-500 rounded-lg hover:bg-gray-600">
1510
1513
  Reset
1511
1514
  </button>
1512
1515
  </div>
@@ -1514,49 +1517,49 @@ def InteractiveDemo(props=None):
1514
1517
  </div>
1515
1518
 
1516
1519
  {/* Todo List Demo */}
1517
- <div class="p-6 bg-white shadow-lg rounded-xl">
1518
- <h2 class="mb-4 text-2xl font-bold text-gray-900">Todo List</h2>
1519
- <div class="space-y-4">
1520
- <div class="flex space-x-2">
1521
- <input type="text" id="todoInput" placeholder="Add a new todo..." class="flex-1 px-4 py-2 border border-gray-300 rounded-lg" />
1522
- <button onclick="addTodo()" class="px-6 py-2 text-white transition-colors bg-blue-500 rounded-lg hover:bg-blue-600">
1520
+ <div className="p-6 bg-white shadow-lg rounded-xl">
1521
+ <h2 className="mb-4 text-2xl font-bold text-gray-900">Todo List</h2>
1522
+ <div className="space-y-4">
1523
+ <div className="flex space-x-2">
1524
+ <input type="text" id="todoInput" placeholder="Add a new todo..." className="flex-1 px-4 py-2 border border-gray-300 rounded-lg" />
1525
+ <button onclick="addTodo()" className="px-6 py-2 text-white transition-colors bg-blue-500 rounded-lg hover:bg-blue-600">
1523
1526
  Add
1524
1527
  </button>
1525
1528
  </div>
1526
- <ul id="todoList" class="space-y-2">
1529
+ <ul id="todoList" className="space-y-2">
1527
1530
  {/* Todos will be added here dynamically */}
1528
1531
  </ul>
1529
1532
  </div>
1530
1533
  </div>
1531
1534
 
1532
1535
  {/* Color Picker Demo */}
1533
- <div class="p-6 bg-white shadow-lg rounded-xl">
1534
- <h2 class="mb-4 text-2xl font-bold text-gray-900">Color Picker</h2>
1535
- <div class="space-y-4">
1536
- <input type="color" id="colorPicker" class="w-full h-20 rounded-lg cursor-pointer" />
1537
- <div id="colorDisplay" class="p-4 font-mono text-lg text-center bg-gray-100 rounded-lg">
1536
+ <div className="p-6 bg-white shadow-lg rounded-xl">
1537
+ <h2 className="mb-4 text-2xl font-bold text-gray-900">Color Picker</h2>
1538
+ <div className="space-y-4">
1539
+ <input type="color" id="colorPicker" className="w-full h-20 rounded-lg cursor-pointer" />
1540
+ <div id="colorDisplay" className="p-4 font-mono text-lg text-center bg-gray-100 rounded-lg">
1538
1541
  Selected: #3B82F6
1539
1542
  </div>
1540
1543
  </div>
1541
1544
  </div>
1542
1545
 
1543
1546
  {/* Form Validation Demo */}
1544
- <div class="p-6 bg-white shadow-lg rounded-xl">
1545
- <h2 class="mb-4 text-2xl font-bold text-gray-900">Form Validation</h2>
1546
- <form onsubmit="validateForm(event)" class="space-y-4">
1547
+ <div className="p-6 bg-white shadow-lg rounded-xl">
1548
+ <h2 className="mb-4 text-2xl font-bold text-gray-900">Form Validation</h2>
1549
+ <form onsubmit="validateForm(event)" className="space-y-4">
1547
1550
  <div>
1548
- <label class="block mb-2 text-sm font-medium text-gray-700">Email</label>
1549
- <input type="email" id="email" required class="w-full px-4 py-2 border border-gray-300 rounded-lg" placeholder="you@example.com" />
1551
+ <label className="block mb-2 text-sm font-medium text-gray-700">Email</label>
1552
+ <input type="email" id="email" required className="w-full px-4 py-2 border border-gray-300 rounded-lg" placeholder="you@example.com" />
1550
1553
  </div>
1551
1554
  <div>
1552
- <label class="block mb-2 text-sm font-medium text-gray-700">Password</label>
1553
- <input type="password" id="password" required minlength="6" class="w-full px-4 py-2 border border-gray-300 rounded-lg" placeholder="•••••••••" />
1555
+ <label className="block mb-2 text-sm font-medium text-gray-700">Password</label>
1556
+ <input type="password" id="password" required minlength="6" className="w-full px-4 py-2 border border-gray-300 rounded-lg" placeholder="•••••••••" />
1554
1557
  </div>
1555
- <button type="submit" class="w-full px-6 py-3 text-white transition-colors bg-blue-500 rounded-lg hover:bg-blue-600">
1558
+ <button type="submit" className="w-full px-6 py-3 text-white transition-colors bg-blue-500 rounded-lg hover:bg-blue-600">
1556
1559
  Validate & Submit
1557
1560
  </button>
1558
1561
  </form>
1559
- <div id="validationResult" class="hidden p-4 mt-4 rounded-lg">
1562
+ <div id="validationResult" className="hidden p-4 mt-4 rounded-lg">
1560
1563
  {/* Validation results will appear here */}
1561
1564
  </div>
1562
1565
  </div>
@@ -1578,56 +1581,56 @@ default = InteractiveDemo
1578
1581
  def Features(props=None):
1579
1582
  """Comprehensive features showcase"""
1580
1583
  return (
1581
- <div class="min-h-screen bg-gray-50">
1582
- <div class="px-4 py-16 mx-auto max-w-7xl sm:px-6 lg:px-8">
1583
- <div class="mb-16 text-center">
1584
- <h1 class="text-4xl font-extrabold text-gray-900">
1584
+ <div className="min-h-screen bg-gray-50">
1585
+ <div className="px-4 py-16 mx-auto max-w-7xl sm:px-6 lg:px-8">
1586
+ <div className="mb-16 text-center">
1587
+ <h1 className="text-4xl font-extrabold text-gray-900">
1585
1588
  NextPy Features
1586
1589
  </h1>
1587
- <p class="mt-4 text-xl text-gray-600">
1590
+ <p className="mt-4 text-xl text-gray-600">
1588
1591
  Everything you need to build modern web applications
1589
1592
  </p>
1590
1593
  </div>
1591
1594
 
1592
- <div class="grid grid-cols-1 gap-12 md:grid-cols-2">
1593
- <div class="space-y-12">
1595
+ <div className="grid grid-cols-1 gap-12 md:grid-cols-2">
1596
+ <div className="space-y-12">
1594
1597
  {/* Core Features */}
1595
1598
  <div>
1596
- <h2 class="mb-6 text-2xl font-bold text-gray-900">Core Features</h2>
1597
- <div class="space-y-6">
1598
- <div class="flex items-start space-x-4">
1599
- <div class="flex-shrink-0 w-6 h-6 text-green-500">
1599
+ <h2 className="mb-6 text-2xl font-bold text-gray-900">Core Features</h2>
1600
+ <div className="space-y-6">
1601
+ <div className="flex items-start space-x-4">
1602
+ <div className="flex-shrink-0 w-6 h-6 text-green-500">
1600
1603
  <svg fill="none" viewBox="0 0 24 24" stroke="currentColor">
1601
1604
  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
1602
1605
  </svg>
1603
1606
  </div>
1604
1607
  <div>
1605
- <h3 class="text-lg font-medium text-gray-900">True JSX Components</h3>
1606
- <p class="mt-2 text-gray-600">Write React-like components with JSX syntax directly in Python</p>
1608
+ <h3 className="text-lg font-medium text-gray-900">True JSX Components</h3>
1609
+ <p className="mt-2 text-gray-600">Write React-like components with JSX syntax directly in Python</p>
1607
1610
  </div>
1608
1611
  </div>
1609
1612
 
1610
- <div class="flex items-start space-x-4">
1611
- <div class="flex-shrink-0 w-6 h-6 text-blue-500">
1613
+ <div className="flex items-start space-x-4">
1614
+ <div className="flex-shrink-0 w-6 h-6 text-blue-500">
1612
1615
  <svg fill="none" viewBox="0 0 24 24" stroke="currentColor">
1613
1616
  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7" />
1614
1617
  </svg>
1615
1618
  </div>
1616
1619
  <div>
1617
- <h3 class="text-lg font-medium text-gray-900">File-based Routing</h3>
1618
- <p class="mt-2 text-gray-600">Automatic route discovery with dynamic routes support</p>
1620
+ <h3 className="text-lg font-medium text-gray-900">File-based Routing</h3>
1621
+ <p className="mt-2 text-gray-600">Automatic route discovery with dynamic routes support</p>
1619
1622
  </div>
1620
1623
  </div>
1621
1624
 
1622
- <div class="flex items-start space-x-4">
1623
- <div class="flex-shrink-0 w-6 h-6 text-purple-500">
1625
+ <div className="flex items-start space-x-4">
1626
+ <div className="flex-shrink-0 w-6 h-6 text-purple-500">
1624
1627
  <svg fill="none" viewBox="0 0 24 24" stroke="currentColor">
1625
1628
  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 2 9 9 0 0118 0z" />
1626
1629
  </svg>
1627
1630
  </div>
1628
1631
  <div>
1629
- <h3 class="text-lg font-medium text-gray-900">Tailwind CSS Integration</h3>
1630
- <p class="mt-2 text-gray-600">Built-in Tailwind CSS v4 with PostCSS compilation</p>
1632
+ <h3 className="text-lg font-medium text-gray-900">Tailwind CSS Integration</h3>
1633
+ <p className="mt-2 text-gray-600">Built-in Tailwind CSS v4 with PostCSS compilation</p>
1631
1634
  </div>
1632
1635
  </div>
1633
1636
  </div>
@@ -1635,41 +1638,41 @@ def Features(props=None):
1635
1638
 
1636
1639
  {/* Development Features */}
1637
1640
  <div>
1638
- <h2 class="mb-6 text-2xl font-bold text-gray-900">Development Experience</h2>
1639
- <div class="space-y-6">
1640
- <div class="flex items-start space-x-4">
1641
- <div class="flex-shrink-0 w-6 h-6 text-red-500">
1641
+ <h2 className="mb-6 text-2xl font-bold text-gray-900">Development Experience</h2>
1642
+ <div className="space-y-6">
1643
+ <div className="flex items-start space-x-4">
1644
+ <div className="flex-shrink-0 w-6 h-6 text-red-500">
1642
1645
  <svg fill="none" viewBox="0 0 24 24" stroke="currentColor">
1643
1646
  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v16h16V4H4z" />
1644
1647
  </svg>
1645
1648
  </div>
1646
1649
  <div>
1647
- <h3 class="text-lg font-medium text-gray-900">Hot Reload</h3>
1648
- <p class="mt-2 text-gray-600">Instant hot reload when saving files with Watchdog</p>
1650
+ <h3 className="text-lg font-medium text-gray-900">Hot Reload</h3>
1651
+ <p className="mt-2 text-gray-600">Instant hot reload when saving files with Watchdog</p>
1649
1652
  </div>
1650
1653
  </div>
1651
1654
 
1652
- <div class="flex items-start space-x-4">
1653
- <div class="flex-shrink-0 w-6 h-6 text-yellow-500">
1655
+ <div className="flex items-start space-x-4">
1656
+ <div className="flex-shrink-0 w-6 h-6 text-yellow-500">
1654
1657
  <svg fill="none" viewBox="0 0 24 24" stroke="currentColor">
1655
1658
  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.75 5H6.25v13l4.5 4.5z" />
1656
1659
  </svg>
1657
1660
  </div>
1658
1661
  <div>
1659
- <h3 class="text-lg font-medium text-gray-900">Debug Mode</h3>
1660
- <p class="mt-2 text-gray-600">Comprehensive debugging with detailed error pages</p>
1662
+ <h3 className="text-lg font-medium text-gray-900">Debug Mode</h3>
1663
+ <p className="mt-2 text-gray-600">Comprehensive debugging with detailed error pages</p>
1661
1664
  </div>
1662
1665
  </div>
1663
1666
 
1664
- <div class="flex items-start space-x-4">
1665
- <div class="flex-shrink-0 w-6 h-6 text-indigo-500">
1667
+ <div className="flex items-start space-x-4">
1668
+ <div className="flex-shrink-0 w-6 h-6 text-indigo-500">
1666
1669
  <svg fill="none" viewBox="0 0 24 24" stroke="currentColor">
1667
1670
  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
1668
1671
  </svg>
1669
1672
  </div>
1670
1673
  <div>
1671
- <h3 class="text-lg font-medium text-gray-900">VS Code Integration</h3>
1672
- <p class="mt-2 text-gray-600">Full VS Code support with extensions and IntelliSense</p>
1674
+ <h3 className="text-lg font-medium text-gray-900">VS Code Integration</h3>
1675
+ <p className="mt-2 text-gray-600">Full VS Code support with extensions and IntelliSense</p>
1673
1676
  </div>
1674
1677
  </div>
1675
1678
  </div>
@@ -1692,54 +1695,54 @@ default = Features
1692
1695
  def GettingStarted(props=None):
1693
1696
  """Comprehensive getting started guide"""
1694
1697
  return (
1695
- <div class="min-h-screen bg-white">
1696
- <div class="max-w-4xl px-4 py-16 mx-auto sm:px-6 lg:px-8">
1697
- <div class="mb-16 text-center">
1698
- <h1 class="text-4xl font-extrabold text-gray-900">
1698
+ <div className="min-h-screen bg-white">
1699
+ <div className="max-w-4xl px-4 py-16 mx-auto sm:px-6 lg:px-8">
1700
+ <div className="mb-16 text-center">
1701
+ <h1 className="text-4xl font-extrabold text-gray-900">
1699
1702
  Getting Started with NextPy
1700
1703
  </h1>
1701
- <p class="mt-4 text-xl text-gray-600">
1704
+ <p className="mt-4 text-xl text-gray-600">
1702
1705
  Your journey to building amazing web apps starts here
1703
1706
  </p>
1704
1707
  </div>
1705
1708
 
1706
- <div class="space-y-16">
1709
+ <div className="space-y-16">
1707
1710
  {/* Step 1 */}
1708
- <div class="p-8 rounded-lg bg-blue-50">
1709
- <div class="flex items-center mb-4">
1710
- <div class="flex items-center justify-center flex-shrink-0 w-8 h-8 font-bold text-white bg-blue-500 rounded-full">
1711
+ <div className="p-8 rounded-lg bg-blue-50">
1712
+ <div className="flex items-center mb-4">
1713
+ <div className="flex items-center justify-center flex-shrink-0 w-8 h-8 font-bold text-white bg-blue-500 rounded-full">
1711
1714
  1
1712
1715
  </div>
1713
- <h2 class="ml-4 text-2xl font-bold text-gray-900">Installation</h2>
1716
+ <h2 className="ml-4 text-2xl font-bold text-gray-900">Installation</h2>
1714
1717
  </div>
1715
- <div class="ml-12 space-y-4">
1716
- <div class="p-4 bg-white border-l-4 border-blue-500 rounded">
1717
- <h3 class="mb-2 font-semibold text-gray-900">Install NextPy</h3>
1718
- <code class="block p-2 text-sm bg-gray-100 rounded">pip install nextpy-framework</code>
1718
+ <div className="ml-12 space-y-4">
1719
+ <div className="p-4 bg-white border-l-4 border-blue-500 rounded">
1720
+ <h3 className="mb-2 font-semibold text-gray-900">Install NextPy</h3>
1721
+ <code className="block p-2 text-sm bg-gray-100 rounded">pip install nextpy-framework</code>
1719
1722
  </div>
1720
- <div class="p-4 bg-white border-l-4 border-blue-500 rounded">
1721
- <h3 class="mb-2 font-semibold text-gray-900">Create New Project</h3>
1722
- <code class="block p-2 text-sm bg-gray-100 rounded">nextpy create my-app</code>
1723
+ <div className="p-4 bg-white border-l-4 border-blue-500 rounded">
1724
+ <h3 className="mb-2 font-semibold text-gray-900">Create New Project</h3>
1725
+ <code className="block p-2 text-sm bg-gray-100 rounded">nextpy create my-app</code>
1723
1726
  </div>
1724
1727
  </div>
1725
1728
  </div>
1726
1729
 
1727
1730
  {/* Step 2 */}
1728
- <div class="p-8 rounded-lg bg-green-50">
1729
- <div class="flex items-center mb-4">
1730
- <div class="flex items-center justify-center flex-shrink-0 w-8 h-8 font-bold text-white bg-green-500 rounded-full">
1731
+ <div className="p-8 rounded-lg bg-green-50">
1732
+ <div className="flex items-center mb-4">
1733
+ <div className="flex items-center justify-center flex-shrink-0 w-8 h-8 font-bold text-white bg-green-500 rounded-full">
1731
1734
  2
1732
1735
  </div>
1733
- <h2 class="ml-4 text-2xl font-bold text-gray-900">Project Structure</h2>
1736
+ <h2 className="ml-4 text-2xl font-bold text-gray-900">Project Structure</h2>
1734
1737
  </div>
1735
- <div class="ml-12">
1736
- <div class="p-4 bg-white border-l-4 border-green-500 rounded">
1737
- <h3 class="mb-2 font-semibold text-gray-900">Navigate to Your Project</h3>
1738
- <code class="block p-2 text-sm bg-gray-100 rounded">cd my-app</code>
1738
+ <div className="ml-12">
1739
+ <div className="p-4 bg-white border-l-4 border-green-500 rounded">
1740
+ <h3 className="mb-2 font-semibold text-gray-900">Navigate to Your Project</h3>
1741
+ <code className="block p-2 text-sm bg-gray-100 rounded">cd my-app</code>
1739
1742
  </div>
1740
- <div class="p-4 mt-4 bg-white border-l-4 border-green-500 rounded">
1741
- <h3 class="mb-2 font-semibold text-gray-900">Project Structure</h3>
1742
- <pre class="p-4 overflow-x-auto text-sm bg-gray-100 rounded">
1743
+ <div className="p-4 mt-4 bg-white border-l-4 border-green-500 rounded">
1744
+ <h3 className="mb-2 font-semibold text-gray-900">Project Structure</h3>
1745
+ <pre className="p-4 overflow-x-auto text-sm bg-gray-100 rounded">
1743
1746
  {`my-app/
1744
1747
  ├── pages/ # Your pages and API routes
1745
1748
  ├── components/ # Reusable components
@@ -1753,42 +1756,42 @@ def GettingStarted(props=None):
1753
1756
  </div>
1754
1757
 
1755
1758
  {/* Step 3 */}
1756
- <div class="p-8 rounded-lg bg-purple-50">
1757
- <div class="flex items-center mb-4">
1758
- <div class="flex items-center justify-center flex-shrink-0 w-8 h-8 font-bold text-white bg-purple-500 rounded-full">
1759
+ <div className="p-8 rounded-lg bg-purple-50">
1760
+ <div className="flex items-center mb-4">
1761
+ <div className="flex items-center justify-center flex-shrink-0 w-8 h-8 font-bold text-white bg-purple-500 rounded-full">
1759
1762
  3
1760
1763
  </div>
1761
- <h2 class="ml-4 text-2xl font-bold text-gray-900">Development</h2>
1764
+ <h2 className="ml-4 text-2xl font-bold text-gray-900">Development</h2>
1762
1765
  </div>
1763
- <div class="ml-12 space-y-4">
1764
- <div class="p-4 bg-white border-l-4 border-purple-500 rounded">
1765
- <h3 class="mb-2 font-semibold text-gray-900">Start Development Server</h3>
1766
- <code class="block p-2 text-sm bg-gray-100 rounded">nextpy dev</code>
1766
+ <div className="ml-12 space-y-4">
1767
+ <div className="p-4 bg-white border-l-4 border-purple-500 rounded">
1768
+ <h3 className="mb-2 font-semibold text-gray-900">Start Development Server</h3>
1769
+ <code className="block p-2 text-sm bg-gray-100 rounded">nextpy dev</code>
1767
1770
  </div>
1768
- <div class="p-4 bg-white border-l-4 border-purple-500 rounded">
1769
- <h3 class="mb-2 font-semibold text-gray-900">Open Your Browser</h3>
1770
- <code class="block p-2 text-sm bg-gray-100 rounded">http://localhost:8000</code>
1771
+ <div className="p-4 bg-white border-l-4 border-purple-500 rounded">
1772
+ <h3 className="mb-2 font-semibold text-gray-900">Open Your Browser</h3>
1773
+ <code className="block p-2 text-sm bg-gray-100 rounded">http://localhost:8000</code>
1771
1774
  </div>
1772
1775
  </div>
1773
1776
  </div>
1774
1777
 
1775
1778
  {/* Step 4 */}
1776
- <div class="p-8 rounded-lg bg-yellow-50">
1777
- <div class="flex items-center mb-4">
1778
- <div class="flex items-center justify-center flex-shrink-0 w-8 h-8 font-bold text-white bg-yellow-500 rounded-full">
1779
+ <div className="p-8 rounded-lg bg-yellow-50">
1780
+ <div className="flex items-center mb-4">
1781
+ <div className="flex items-center justify-center flex-shrink-0 w-8 h-8 font-bold text-white bg-yellow-500 rounded-full">
1779
1782
  4
1780
1783
  </div>
1781
- <h2 class="ml-4 text-2xl font-bold text-gray-900">Build Your First Component</h2>
1784
+ <h2 className="ml-4 text-2xl font-bold text-gray-900">Build Your First Component</h2>
1782
1785
  </div>
1783
- <div class="ml-12">
1784
- <div class="p-4 bg-white border-l-4 border-yellow-500 rounded">
1785
- <h3 class="mb-2 font-semibold text-gray-900">Create a Component</h3>
1786
- <p class="mb-2 text-gray-600">Edit pages/index.py to create your first JSX component:</p>
1787
- <pre class="p-4 overflow-x-auto text-sm text-green-400 bg-gray-900 rounded">
1786
+ <div className="ml-12">
1787
+ <div className="p-4 bg-white border-l-4 border-yellow-500 rounded">
1788
+ <h3 className="mb-2 font-semibold text-gray-900">Create a Component</h3>
1789
+ <p className="mb-2 text-gray-600">Edit pages/index.py to create your first JSX component:</p>
1790
+ <pre className="p-4 overflow-x-auto text-sm text-green-400 bg-gray-900 rounded">
1788
1791
  {`def Home(props=None):
1789
1792
  return (
1790
- <div class="flex items-center justify-center min-h-screen bg-blue-500">
1791
- <h1 class="text-3xl font-bold text-white">
1793
+ <div className="flex items-center justify-center min-h-screen bg-blue-500">
1794
+ <h1 className="text-3xl font-bold text-white">
1792
1795
  Hello, NextPy!
1793
1796
  </h1>
1794
1797
  </div>
@@ -1832,7 +1835,7 @@ def Button(props = None):
1832
1835
  class_attr = f"px-6 py-3 rounded-lg font-medium transition-all duration-200 transform hover:scale-105 {variant_class} {className}"
1833
1836
 
1834
1837
  return (
1835
- <button class={class_attr}
1838
+ <button className={class_attr}
1836
1839
  id={props.get("id")}
1837
1840
  disabled={props.get("disabled", False)}
1838
1841
  onclick={props.get("onClick", "")}>
@@ -1856,23 +1859,23 @@ def Layout(props = None):
1856
1859
  children = props.get("children", "")
1857
1860
 
1858
1861
  return (
1859
- <div class="flex flex-col min-h-screen">
1860
- <header class="bg-white shadow-sm">
1861
- <div class="px-4 py-4 mx-auto max-w-7xl">
1862
- <div class="flex items-center justify-between">
1863
- <h1 class="text-2xl font-bold text-gray-900">{title}</h1>
1864
- <nav class="flex space-x-4">
1865
- <a href="/" class="text-gray-600 hover:text-gray-900">Home</a>
1866
- <a href="/about" class="text-gray-600 hover:text-gray-900">About</a>
1862
+ <div className="flex flex-col min-h-screen">
1863
+ <header className="bg-white shadow-sm">
1864
+ <div className="px-4 py-4 mx-auto max-w-7xl">
1865
+ <div className="flex items-center justify-between">
1866
+ <h1 className="text-2xl font-bold text-gray-900">{title}</h1>
1867
+ <nav className="flex space-x-4">
1868
+ <a href="/" className="text-gray-600 hover:text-gray-900">Home</a>
1869
+ <a href="/about" className="text-gray-600 hover:text-gray-900">About</a>
1867
1870
  </nav>
1868
1871
  </div>
1869
1872
  </div>
1870
1873
  </header>
1871
- <main class="flex-1">
1874
+ <main className="flex-1">
1872
1875
  {children}
1873
1876
  </main>
1874
- <footer class="mt-auto bg-gray-100">
1875
- <div class="px-4 py-6 mx-auto text-center text-gray-600 max-w-7xl">
1877
+ <footer className="mt-auto bg-gray-100">
1878
+ <div className="px-4 py-6 mx-auto text-center text-gray-600 max-w-7xl">
1876
1879
  <p>&copy; 2025 NextPy Framework. All rights reserved.</p>
1877
1880
  </div>
1878
1881
  </footer>
@@ -2287,7 +2290,7 @@ try:
2287
2290
  except Exception as e:
2288
2291
  print(f"Warning: Database initialization failed: {e}")
2289
2292
 
2290
- # Create NextPy app
2293
+ # Create NextPy app with file-based routing
2291
2294
  app = create_app(
2292
2295
  pages_dir="pages",
2293
2296
  templates_dir="templates",
@@ -2296,15 +2299,10 @@ app = create_app(
2296
2299
  debug=settings["debug"],
2297
2300
  )
2298
2301
 
2299
- # Add health check endpoint
2300
- @app.get("/health")
2301
- async def health_check():
2302
- return {"status": "healthy", "framework": "NextPy"}
2303
-
2304
- # Root endpoint
2305
- @app.get("/")
2306
- async def root():
2307
- return {"message": "NextPy is running!", "docs": "/docs"}
2302
+ # Note: Routes are automatically loaded from pages/ directory
2303
+ # - / -> pages/index.py
2304
+ # - /about -> pages/about.py
2305
+ # - /api/* -> pages/api/*.py
2308
2306
 
2309
2307
  if __name__ == "__main__":
2310
2308
  import uvicorn