index.tsx
1 import { createFileRoute } from '@tanstack/react-router' 2 3 import { 4 Zap, 5 Server, 6 Route as RouteIcon, 7 Shield, 8 Waves, 9 Sparkles, 10 } from 'lucide-react' 11 12 export const Route = createFileRoute('/')({ 13 component: App, 14 }) 15 16 function App() { 17 const features = [ 18 { 19 icon: <Zap className="w-12 h-12 text-cyan-400" />, 20 title: 'Powerful Server Functions', 21 description: 22 'Write server-side code that seamlessly integrates with your client components. Type-safe, secure, and simple.', 23 }, 24 { 25 icon: <Server className="w-12 h-12 text-cyan-400" />, 26 title: 'Flexible Server Side Rendering', 27 description: 28 'Full-document SSR, streaming, and progressive enhancement out of the box. Control exactly what renders where.', 29 }, 30 { 31 icon: <RouteIcon className="w-12 h-12 text-cyan-400" />, 32 title: 'API Routes', 33 description: 34 'Build type-safe API endpoints alongside your application. No separate backend needed.', 35 }, 36 { 37 icon: <Shield className="w-12 h-12 text-cyan-400" />, 38 title: 'Strongly Typed Everything', 39 description: 40 'End-to-end type safety from server to client. Catch errors before they reach production.', 41 }, 42 { 43 icon: <Waves className="w-12 h-12 text-cyan-400" />, 44 title: 'Full Streaming Support', 45 description: 46 'Stream data from server to client progressively. Perfect for AI applications and real-time updates.', 47 }, 48 { 49 icon: <Sparkles className="w-12 h-12 text-cyan-400" />, 50 title: 'Next Generation Ready', 51 description: 52 'Built from the ground up for modern web applications. Deploy anywhere JavaScript runs.', 53 }, 54 ] 55 56 return ( 57 <div className="min-h-screen bg-gradient-to-b from-slate-900 via-slate-800 to-slate-900"> 58 <section className="relative py-20 px-6 text-center overflow-hidden"> 59 <div className="absolute inset-0 bg-gradient-to-r from-cyan-500/10 via-blue-500/10 to-purple-500/10"></div> 60 <div className="relative max-w-5xl mx-auto"> 61 <div className="flex items-center justify-center gap-6 mb-6"> 62 <img 63 src="/tanstack-circle-logo.png" 64 alt="TanStack Logo" 65 className="w-24 h-24 md:w-32 md:h-32" 66 /> 67 <h1 className="text-6xl md:text-7xl font-bold text-white"> 68 <span className="text-gray-300">TANSTACK</span>{' '} 69 <span className="bg-gradient-to-r from-cyan-400 to-blue-400 bg-clip-text text-transparent"> 70 START 71 </span> 72 </h1> 73 </div> 74 <p className="text-2xl md:text-3xl text-gray-300 mb-4 font-light"> 75 The framework for next generation AI applications 76 </p> 77 <p className="text-lg text-gray-400 max-w-3xl mx-auto mb-8"> 78 Full-stack framework powered by TanStack Router for React and Solid. 79 Build modern applications with server functions, streaming, and type 80 safety. 81 </p> 82 <div className="flex flex-col items-center gap-4"> 83 <a 84 href="https://tanstack.com/start" 85 target="_blank" 86 rel="noopener noreferrer" 87 className="px-8 py-3 bg-cyan-500 hover:bg-cyan-600 text-white font-semibold rounded-lg transition-colors shadow-lg shadow-cyan-500/50" 88 > 89 Documentation 90 </a> 91 <p className="text-gray-400 text-sm mt-2"> 92 Begin your TanStack Start journey by editing{' '} 93 <code className="px-2 py-1 bg-slate-700 rounded text-cyan-400"> 94 /src/routes/index.tsx 95 </code> 96 </p> 97 </div> 98 </div> 99 </section> 100 101 <section className="py-16 px-6 max-w-7xl mx-auto"> 102 <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> 103 {features.map((feature, index) => ( 104 <div 105 key={index} 106 className="bg-slate-800/50 backdrop-blur-sm border border-slate-700 rounded-xl p-6 hover:border-cyan-500/50 transition-all duration-300 hover:shadow-lg hover:shadow-cyan-500/10" 107 > 108 <div className="mb-4">{feature.icon}</div> 109 <h3 className="text-xl font-semibold text-white mb-3"> 110 {feature.title} 111 </h3> 112 <p className="text-gray-400 leading-relaxed"> 113 {feature.description} 114 </p> 115 </div> 116 ))} 117 </div> 118 </section> 119 </div> 120 ) 121 }