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