create-fluxstack 1.8.1 → 1.8.3

package/.env.example

@@ -28,6 +28,25 @@ CORS_HEADERS=Content-Type,Authorization
 # Logging
 LOG_LEVEL=info
 
+# Swagger Documentation
+SWAGGER_ENABLED=true
+SWAGGER_TITLE=FluxStack API
+SWAGGER_VERSION=1.8.2
+SWAGGER_DESCRIPTION=API documentation for FluxStack application
+SWAGGER_PATH=/swagger
+# SWAGGER_EXCLUDE_PATHS=/internal,/admin
+# SWAGGER_SERVERS=https://api.myapp.com|Production,https://staging.myapp.com|Staging
+SWAGGER_PERSIST_AUTH=true
+SWAGGER_DISPLAY_DURATION=true
+SWAGGER_ENABLE_FILTER=true
+SWAGGER_SHOW_EXTENSIONS=true
+SWAGGER_TRY_IT_OUT=true
+
+# Swagger Authentication (Basic Auth)
+SWAGGER_AUTH_ENABLED=false
+SWAGGER_AUTH_USERNAME=admin
+# SWAGGER_AUTH_PASSWORD=your-secure-password-here
+
 # Build Configuration
 BUILD_TARGET=bun
 BUILD_OUTDIR=dist

package/README.md

@@ -10,12 +10,15 @@ Create modern full-stack TypeScript applications with zero configuration.
 ## Quick Start
 
 ```bash
-# scaffold a new FluxStack app
+# Create a new FluxStack app
 bunx create-fluxstack my-awesome-app
-
-# enter the project and start developing
 cd my-awesome-app
 bun run dev
+
+# OR create in current directory
+mkdir my-app && cd my-app
+bunx create-fluxstack .
+bun run dev
 ```
 
 Your development environment will be available at:

package/app/client/SIMPLIFICATION.md

@@ -0,0 +1,140 @@
+# 🎨 FluxStack Client - Simplified Version
+
+This is a **simplified, single-page version** of the FluxStack client, inspired by the clean and modern design of Vite's landing page.
+
+## 🚀 What Changed?
+
+### ✅ **Kept (Essential)**
+- ✅ **Eden Treaty** - Core type-safe API client
+- ✅ **React 19** - Modern React with hooks
+- ✅ **Vite 7** - Lightning-fast dev server
+- ✅ **TailwindCSS** - Utility-first styling
+- ✅ **TypeScript** - Full type safety
+- ✅ **react-icons** - Icon library
+
+### ❌ **Removed (Complexity)**
+- ❌ **React Router** - No more multi-page routing
+- ❌ **Zustand** - Removed complex state management (using simple `useState`)
+- ❌ **Multiple Pages** - Consolidated into single page (Overview, Demo, HybridLive, ApiDocs, CryptoAuth)
+- ❌ **Complex Error System** - Simplified error handling
+- ❌ **Navigation System** - No more tabs and complex navigation
+- ❌ **Detailed API Status Section** - Replaced with simple badge
+- ❌ **Complex Live Component UIs** - Simplified to minimal clock display
+
+### ✅ **Kept (Advanced Features)**
+- ✅ **LiveComponents** - Live Clock provido via LiveComponent
+- ✅ **LiveComponentsProvider** - Full real-time capabilities maintained
+- ✅ **Hybrid Live Component** - Clock synced with server in real-time
+
+## 📊 Comparison
+
+| Metric | Before | After | Reduction |
+|--------|--------|-------|-----------|
+| **Files** | 43 | ~10 | **-76%** |
+| **Components** | 11 | 2 | **-82%** |
+| **Pages** | 5 | 1 | **-80%** |
+| **Dependencies** | 27 | 19 | **-30%** |
+| **Lines in App.tsx** | 331 | 213 | **-36%** |
+| **Live Components** | 6 complex | 1 minimal | **-83%** |
+
+## 🎯 What Does It Show?
+
+The simplified client demonstrates:
+
+1. **🎨 Minimalist Design** - Clean, centered design inspired by Next.js, React, and Vite
+2. **⚡ Simple API Status** - Single badge showing API online/offline
+3. **🚀 Core Features** - 4 feature cards highlighting main capabilities
+4. **🕐 Live Clock** - Real LiveComponent synced with server in real-time
+5. **📖 Quick Actions** - Direct links to API Docs, GitHub, and API Demo
+6. **🔥 Clean but Powerful** - Minimalist UI with full real-time capabilities
+
+## 📝 Structure
+
+```
+app/client/src/
+├── App.tsx              # Single-page application (213 lines)
+│                        # - AppContent component (main UI)
+│                        # - MinimalLiveClock component (LiveComponent)
+│                        # - LiveComponentsProvider wrapper
+├── main.tsx             # Entry point (simplified)
+├── index.css            # Minimal global styles
+├── vite-env.d.ts        # Vite type definitions
+├── assets/              # Static assets
+│   └── react.svg        # React logo
+└── lib/                 # Core utilities
+    ├── eden-api.ts      # Eden Treaty API client
+    └── errors.ts        # Error handling utilities
+```
+
+**Total files in src/**: 6 core files (vs 43+ before)
+
+## 🎨 Design Philosophy
+
+Inspired by **Next.js, React, and Vite landing pages**:
+- Everything centered vertically and horizontally
+- Large animated logo (fire icon with pulse animation)
+- Minimal text, maximum impact
+- Simple API status badge (online/offline)
+- 4 feature cards in responsive grid
+- **Live Clock via LiveComponent** - Real-time sync with server
+- Clean action buttons at bottom
+- No background blob animations (clean and fast)
+- Mobile-first responsive design
+- **Full Live Components support** - Maintains advanced real-time features
+
+## 🔧 How to Use
+
+```bash
+# Start development server (backend + frontend)
+bun run dev
+
+# Frontend only
+bun run dev:frontend
+
+# Backend only
+bun run dev:backend
+```
+
+The page will automatically show:
+- ✅ **Green badge** - Backend is running and healthy
+- ⚠️ **Yellow badge** - Checking backend status
+- ❌ **Red badge** - Backend is offline
+
+## 🎯 When to Use This Version?
+
+**Use this ultra-simplified version when:**
+- You want the cleanest possible presentation
+- You're showcasing FluxStack to newcomers or investors
+- You need a professional landing page
+- You want maximum simplicity (like Next.js/React/Vite)
+- You prefer minimalism over features
+- You want fast loading and minimal JavaScript
+
+**Use the full version when:**
+- You need multiple pages/routes
+- You require complex state management
+- You want real-time features (WebSocket)
+- You need complete demos (CRUD, Auth, etc.)
+- You're building a full application with all features
+
+## 💡 Future Enhancements (Optional)
+
+If you want to extend this simplified version, consider adding:
+- [ ] Simple counter demo using Eden Treaty
+- [ ] User CRUD with minimal UI
+- [ ] Dark/Light theme toggle
+- [ ] Smooth scroll to sections
+- [ ] More feature cards
+
+## 📚 References
+
+- [FluxStack Documentation](../../ai-context/)
+- [Eden Treaty Guide](../../ai-context/development/eden-treaty-guide.md)
+- [Vite Documentation](https://vite.dev)
+- [React Documentation](https://react.dev)
+
+---
+
+**🎯 Goal**: Provide a clean, simple, and beautiful client that showcases FluxStack's core value proposition without overwhelming complexity.
+
+**Made with ❤️ by FluxStack Team**

package/app/client/frontend-only.ts

@@ -1,5 +1,5 @@
 // Frontend standalone entry point
-import { startFrontendOnly } from "../../core/client/standalone"
+import { startFrontendOnly } from "@/core/client/standalone"
 
 // Configuração para frontend standalone
 const frontendConfig = {

package/app/client/src/App.tsx

@@ -1,319 +1,184 @@
 import { useState, useEffect } from 'react'
-import { api, getErrorMessage } from './lib/eden-api'
-import {
-  FaRocket,
-  FaCheckCircle, FaTimesCircle, FaBook, FaShieldAlt, FaBolt,
-  FaClipboardList, FaFire, FaFlask as FaTest,
-} from 'react-icons/fa'
-import { Routes, Route, Link } from 'react-router-dom'
-
-// Live Components Provider - Singleton WebSocket Connection for All Live Components
-import { LiveComponentsProvider } from '@/core/client'
-
-// Import page components
-import { OverviewPage } from './pages/Overview'
-import { DemoPage } from './pages/Demo'
-import { HybridLivePage } from './pages/HybridLive'
-import { ApiDocsPage } from './pages/ApiDocs'
-import { CryptoAuthPage } from './pages/CryptoAuthPage'
-import { MainLayout } from './components/MainLayout'
-
-// State management is now handled by Zustand stores directly
-
-interface User {
-  id: number
-  name: string
-  email: string
-  createdAt: string | Date
+import { api } from './lib/eden-api'
+import { FaFire, FaBook, FaGithub, FaClock } from 'react-icons/fa'
+import { LiveComponentsProvider, useHybridLiveComponent } from '@/core/client'
+
+interface LiveClockState {
+  currentTime: string
+  timeZone: string
+  format: '12h' | '24h'
+  showSeconds: boolean
+  showDate: boolean
+  lastSync: Date
+  serverUptime: number
 }
 
-interface UsersResponse {
-  users: User[]
+const initialClockState: LiveClockState = {
+  currentTime: "Loading...",
+  timeZone: "America/Sao_Paulo",
+  format: "24h",
+  showSeconds: true,
+  showDate: true,
+  lastSync: new Date(),
+  serverUptime: 0,
 }
 
-interface UserCreateResponse {
-  success: boolean
-  user?: User
-  message?: string
-}
+// Minimal Live Clock Component
+function MinimalLiveClock() {
+  const { state } = useHybridLiveComponent<LiveClockState>(
+    'LiveClock',
+    initialClockState
+  )
 
-interface UserDeleteResponse {
-  success: boolean
-  message?: string
+  return (
+    <div className="bg-gradient-to-br from-blue-500/10 to-purple-500/10 rounded-xl p-4 border border-blue-400/20">
+      <div className="text-4xl font-mono font-bold text-white text-center tracking-wider">
+        {state.currentTime}
+      </div>
+      <div className="text-center mt-2">
+        <span className="text-xs text-gray-400">{state.timeZone}</span>
+      </div>
+    </div>
+  )
 }
 
 function AppContent() {
-  const [users, setUsers] = useState<User[]>([])
-  const [loading, setLoading] = useState(false)
-  const [apiStatus, setApiStatus] = useState<'online' | 'offline'>('offline')
-  const [name, setName] = useState('')
-  const [email, setEmail] = useState('')
-  const [submitting, setSubmitting] = useState(false)
-  const [message, setMessage] = useState<{ type: 'success' | 'error', text: string } | null>(null)
+  const [apiStatus, setApiStatus] = useState<'checking' | 'online' | 'offline'>('checking')
 
   useEffect(() => {
     checkApiStatus()
-    loadUsers()
-  }, []) // eslint-disable-line react-hooks/exhaustive-deps
+  }, [])
 
   const checkApiStatus = async () => {
     try {
       const { error } = await api.health.get()
-      if (error) {
-        setApiStatus('offline')
-      } else {
-        setApiStatus('online')
-      }
+      setApiStatus(error ? 'offline' : 'online')
     } catch {
       setApiStatus('offline')
     }
   }
 
-  const loadUsers = async () => {
-    try {
-      setLoading(true)
-      const { data, error } = await api.users.get()
-      
-      if (error) {
-        showMessage('error', `Erro ao carregar usuários: ${error.status}`)
-        return
-      }
-      
-      setUsers((data as UsersResponse).users || [])
-    } catch (error) {
-      showMessage('error', getErrorMessage(error))
-    } finally {
-      setLoading(false)
-    }
-  }
-
-  const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault()
-    if (!name.trim() || !email.trim()) return
-
-    try {
-      setSubmitting(true)
-      const { data: result, error } = await api.users.post({ 
-        name: name.trim(), 
-        email: email.trim() 
-      })
-      
-      if (error) {
-        showMessage('error', `Erro ao criar usuário: ${error.status}`)
-        return
-      }
-      
-      const createResult = result as UserCreateResponse
-      if (createResult.success && createResult.user) {
-        setUsers(prev => [...prev, createResult.user!])
-        setName('')
-        setEmail('')
-        showMessage('success', `Usuário ${name} adicionado com sucesso!`)
-      } else {
-        showMessage('error', createResult.message || 'Erro ao criar usuário')
-      }
-    } catch (error) {
-      showMessage('error', getErrorMessage(error))
-    } finally {
-      setSubmitting(false)
-    }
-  }
-
-  const handleDelete = async (userId: number, userName: string) => {
-    if (!confirm(`Tem certeza que deseja remover ${userName}?`)) return
-    
-    try {
-      const { data: result, error } = await api.users({ id: userId }).delete()
-      
-      if (error) {
-        showMessage('error', `Erro ao deletar usuário: ${error.status}`)
-        return
-      }
-      
-      const deleteResult = result as UserDeleteResponse
-      if (deleteResult.success) {
-        setUsers(prev => prev.filter(user => user.id !== userId))
-        showMessage('success', `Usuário ${userName} removido com sucesso!`)
-      } else {
-        showMessage('error', deleteResult.message || 'Erro ao deletar usuário')
-      }
-    } catch (error) {
-      showMessage('error', getErrorMessage(error))
-    }
-  }
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-slate-900 via-purple-900 to-slate-900">
+      <div className="flex flex-col items-center justify-center min-h-screen px-6 text-center">
+        {/* Logo */}
+        <div className="mb-8 animate-pulse-slow">
+          <FaFire className="text-8xl text-orange-500 drop-shadow-2xl" />
+        </div>
 
-  const showMessage = (type: 'success' | 'error', text: string) => {
-    setMessage({ type, text })
-    setTimeout(() => setMessage(null), 5000)
-  }
+        {/* Title */}
+        <h1 className="text-6xl md:text-7xl font-bold mb-4 bg-gradient-to-r from-blue-400 via-purple-400 to-pink-400 bg-clip-text text-transparent">
+          FluxStack
+        </h1>
+
+        {/* Subtitle */}
+        <p className="text-xl md:text-2xl text-gray-300 mb-8 max-w-2xl">
+          Full-stack TypeScript framework with{' '}
+          <span className="text-purple-400 font-semibold">Bun</span>,{' '}
+          <span className="text-blue-400 font-semibold">Elysia</span>, and{' '}
+          <span className="text-cyan-400 font-semibold">React</span>
+        </p>
+
+        {/* API Status Badge */}
+        <div className="mb-12">
+          <div className={`inline-flex items-center gap-2 px-4 py-2 rounded-full text-sm font-medium transition-all ${
+            apiStatus === 'online'
+              ? 'bg-emerald-500/20 text-emerald-300 border border-emerald-500/30'
+              : apiStatus === 'offline'
+              ? 'bg-red-500/20 text-red-300 border border-red-500/30'
+              : 'bg-yellow-500/20 text-yellow-300 border border-yellow-500/30'
+          }`}>
+            <div className={`w-2 h-2 rounded-full ${
+              apiStatus === 'online' ? 'bg-emerald-400' : apiStatus === 'offline' ? 'bg-red-400' : 'bg-yellow-400'
+            }`}></div>
+            <span>{apiStatus === 'checking' ? 'Checking API...' : apiStatus === 'online' ? 'API Online' : 'API Offline'}</span>
+          </div>
+        </div>
 
-  const getInitials = (name: string) => {
-    return name.split(' ').map(n => n[0]).join('').toUpperCase().slice(0, 2)
-  }
+        {/* Feature Cards */}
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-12 max-w-6xl">
+          <div className="bg-white/5 backdrop-blur-sm border border-white/10 rounded-2xl p-6 hover:bg-white/10 transition-all">
+            <div className="text-3xl mb-3">⚡</div>
+            <h3 className="text-lg font-semibold text-white mb-2">Ultra Rápido</h3>
+            <p className="text-gray-400 text-sm">Bun runtime 3x mais rápido que Node.js</p>
+          </div>
 
-  return (
-    <div>
-      <Routes>
-        {/* Full-screen Live App Route */}
-        <Route path="/live-app" element={<MainLayout />} />
-        
-        {/* Regular routes with header and layout */}
-        <Route path="*" element={
-          <div className="min-h-screen bg-gradient-to-br from-slate-50 via-blue-50 to-indigo-100">
-            {/* Header */}
-            <header className="bg-white/80 backdrop-blur-sm border-b border-gray-200 sticky top-0 z-50">
-              <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-                <div className="flex justify-between items-center h-16">
-                  {/* Logo and Navigation */}
-                  <div className="flex items-center space-x-8">
-                    <div className="flex items-center space-x-3">
-                      <div className="flex items-center gap-2">
-                        <FaFire className="text-2xl text-orange-500" />
-                        <div className="text-2xl font-bold bg-gradient-to-r from-blue-600 via-purple-600 to-indigo-600 bg-clip-text text-transparent">
-                          FluxStack
-                        </div>
-                      </div>
-                      <span className="px-2 py-1 text-xs font-medium bg-blue-100 text-blue-800 rounded-full">
-                        v1.4.0
-                      </span>
-                    </div>
-                    
-                    {/* Navigation Tabs */}
-                    <nav className="hidden md:flex space-x-1">
-                      {[
-                        { id: 'overview', label: 'Visão Geral', icon: <FaClipboardList />, path: '/' },
-                        { id: 'demo', label: 'Demo', icon: <FaRocket />, path: '/demo' },
-                        { id: 'crypto-auth', label: 'Crypto Auth', icon: <FaShieldAlt />, path: '/crypto-auth' },
-                        { id: 'hybrid-live', label: 'Hybrid Live', icon: <FaBolt />, path: '/hybrid-live' },
-                        { id: 'live-app', label: 'Live App', icon: <FaFire />, path: '/live-app' },
-                        { id: 'api-docs', label: 'API Docs', icon: <FaBook />, path: '/api-docs' },
-                        { id: 'tests', label: 'Testes', icon: <FaTest />, path: '/tests' }
-                      ].map(tab => (
-                        <Link
-                          key={tab.id}
-                          to={tab.path}
-                          className={`px-4 py-2 text-sm font-medium rounded-lg transition-all duration-200 ${
-                            location.pathname === tab.path
-                              ? 'bg-blue-100 text-blue-700 shadow-sm'
-                              : 'text-gray-600 hover:text-gray-900 hover:bg-gray-100'
-                          }`}
-                        >
-                          <div className="flex items-center gap-2">
-                            {tab.icon}
-                            {tab.label}
-                          </div>
-                        </Link>
-                      ))}
-                    </nav>
-                  </div>
+          <div className="bg-white/5 backdrop-blur-sm border border-white/10 rounded-2xl p-6 hover:bg-white/10 transition-all">
+            <div className="text-3xl mb-3">🔒</div>
+            <h3 className="text-lg font-semibold text-white mb-2">Type Safe</h3>
+            <p className="text-gray-400 text-sm">Eden Treaty com inferência automática</p>
+          </div>
 
-                  {/* Status Badge */}
-                  <div className={`flex items-center space-x-2 px-3 py-2 rounded-full text-sm font-medium ${
-                    apiStatus === 'online' 
-                      ? 'bg-emerald-100 text-emerald-700' 
-                      : 'bg-red-100 text-red-700'
-                  }`}>
-                    <div className={`w-2 h-2 rounded-full ${
-                      apiStatus === 'online' ? 'bg-emerald-400' : 'bg-red-400'
-                    }`}></div>
-                    <span>API {apiStatus === 'online' ? 'Online' : 'Offline'}</span>
-                  </div>
-                </div>
+          <div className="bg-white/5 backdrop-blur-sm border border-white/10 rounded-2xl p-6 hover:bg-white/10 transition-all">
+            <div className="text-3xl mb-3">🎨</div>
+            <h3 className="text-lg font-semibold text-white mb-2">Moderno</h3>
+            <p className="text-gray-400 text-sm">React 19 + Vite + Tailwind CSS</p>
+          </div>
 
-                {/* Mobile Navigation */}
-                <div className="md:hidden pb-3">
-                  <nav className="flex space-x-1">
-                    {[
-                      { id: 'overview', label: 'Visão', icon: <FaClipboardList />, path: '/' },
-                      { id: 'demo', label: 'Demo', icon: <FaRocket />, path: '/demo' },
-                      { id: 'crypto-auth', label: 'Crypto', icon: <FaShieldAlt />, path: '/crypto-auth' },
-                      { id: 'hybrid-live', label: 'Hybrid', icon: <FaBolt />, path: '/hybrid-live' },
-                      { id: 'api-docs', label: 'Docs', icon: <FaBook />, path: '/api-docs' },
-                      { id: 'tests', label: 'Testes', icon: <FaTest />, path: '/tests' }
-                    ].map(tab => (
-                      <Link
-                        key={tab.id}
-                        to={tab.path}
-                        className={`flex-1 px-3 py-2 text-xs font-medium rounded-lg transition-all duration-200 ${
-                          location.pathname === tab.path
-                            ? 'bg-blue-100 text-blue-700'
-                            : 'text-gray-600 hover:text-gray-900 hover:bg-gray-100'
-                        }`}
-                      >
-                        <div className="flex flex-col items-center gap-1">
-                          {tab.icon}
-                          <span>{tab.label}</span>
-                        </div>
-                      </Link>
-                    ))}
-                  </nav>
-                </div>
+          {/* Live Clock Card */}
+          <div className="bg-white/5 backdrop-blur-sm border border-white/10 rounded-2xl p-6 hover:bg-white/10 transition-all">
+            <div className="flex items-center gap-3 mb-3">
+              <FaClock className="text-2xl text-emerald-400" />
+              <div>
+                <h3 className="text-lg font-semibold text-white">Live Clock</h3>
+                <p className="text-gray-400 text-sm">Provido via LiveComponent</p>
               </div>
-            </header>
-
-            {/* Main Content */}
-            <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
-              <Routes>
-                <Route path="/" element={<OverviewPage />} />
-                <Route 
-                  path="/demo" 
-                  element={
-                    <DemoPage 
-                      users={users}
-                      apiStatus={apiStatus}
-                      loading={loading}
-                      submitting={submitting}
-                      name={name}
-                      email={email}
-                      setName={setName}
-                      setEmail={setEmail}
-                      handleSubmit={handleSubmit}
-                      handleDelete={handleDelete}
-                      loadUsers={loadUsers}
-                      getInitials={getInitials}
-                    />
-                  }
-                />
-                <Route path="/crypto-auth" element={<CryptoAuthPage />} />
-                <Route path="/hybrid-live" element={<HybridLivePage />} />
-                <Route path="/api-docs" element={<ApiDocsPage />} />
-                <Route path="/tests" element={
-                  <div className="p-6">
-                    <h2 className="text-2xl font-bold mb-4">🧪 Tests</h2>
-                    <p className="text-gray-600">Test suite functionality will be available here.</p>
-                  </div>
-                } />
-              </Routes>
-            </main>
+            </div>
+            <MinimalLiveClock />
           </div>
-        } />
-      </Routes>
+        </div>
 
-      {/* Toast Notification */}
-      {message && (
-        <div 
-          className={`fixed top-4 right-4 z-50 px-6 py-4 rounded-xl shadow-lg cursor-pointer transform transition-all duration-300 max-w-sm ${
-            message.type === 'success' 
-              ? 'bg-emerald-500 text-white' 
-              : 'bg-red-500 text-white'
-          }`}
-          onClick={() => setMessage(null)}
-        >
-          <div className="flex items-center space-x-2">
-            {message.type === 'success' ? (
-              <FaCheckCircle className="text-lg" />
-            ) : (
-              <FaTimesCircle className="text-lg" />
-            )}
-            <span className="font-medium">{message.text}</span>
-          </div>
+        {/* Action Buttons */}
+        <div className="flex flex-wrap gap-4 justify-center">
+          <a
+            href="http://localhost:3000/swagger"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="inline-flex items-center gap-2 px-6 py-3 bg-gradient-to-r from-blue-500 to-purple-600 text-white rounded-xl font-medium hover:shadow-lg hover:shadow-purple-500/50 transition-all"
+          >
+            <FaBook />
+            API Docs
+          </a>
+          <a
+            href="https://github.com/MarcosBrendonDePaula/FluxStack"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="inline-flex items-center gap-2 px-6 py-3 bg-white/10 backdrop-blur-sm border border-white/20 text-white rounded-xl font-medium hover:bg-white/20 transition-all"
+          >
+            <FaGithub />
+            GitHub
+          </a>
+          <a
+            href="http://localhost:3000/api"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="inline-flex items-center gap-2 px-6 py-3 bg-white/10 backdrop-blur-sm border border-white/20 text-white rounded-xl font-medium hover:bg-white/20 transition-all"
+          >
+            🚀 API Root
+          </a>
+        </div>
+
+        {/* Footer */}
+        <div className="mt-16 text-gray-500 text-sm">
+          <p>Desenvolvido com ❤️ usando TypeScript</p>
         </div>
-      )}
+      </div>
+
+      {/* Animations */}
+      <style>{`
+        @keyframes pulse-slow {
+          0%, 100% { opacity: 1; }
+          50% { opacity: 0.8; }
+        }
+        .animate-pulse-slow {
+          animation: pulse-slow 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+        }
+      `}</style>
     </div>
   )
 }
 
-// Main App component - Wrapped with LiveComponentsProvider for single WebSocket connection
+// Main App with LiveComponentsProvider
 function App() {
   return (
     <LiveComponentsProvider
@@ -328,4 +193,4 @@ function App() {
   )
 }
 
-export default App
+export default App