Amolika/react-agent-wizard
0
1<!DOCTYPE html>2<html lang="en">3<head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <title>About - React Agent Wizard</title>7 <link rel="icon" type="image/x-icon" href="/static/favicon.ico">8 <script src="https://cdn.tailwindcss.com"></script>9 <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>10 <script src="https://unpkg.com/feather-icons"></script>11 <script src="https://cdn.jsdelivr.net/npm/vanta@0.5.24/dist/vanta.net.min.js"></script>12 <style>13 #vanta-bg {14 position: fixed;15 top: 0;16 left: 0;17 width: 100%;18 height: 100%;19 z-index: -1;20 opacity: 0.2;21 }22 </style>23</head>24<body class="bg-gray-100">25 <div id="vanta-bg"></div>26 <div class="min-h-screen flex">27 <!-- Sidebar -->28 <div class="w-64 bg-white border-r border-gray-200 flex flex-col">29 <div class="p-4 border-b border-gray-200">30 <a href="index.html" class="w-full flex items-center justify-center space-x-2 bg-indigo-600 hover:bg-indigo-700 text-white py-2 px-4 rounded-lg transition-colors">31 <i data-feather="arrow-left" class="w-4 h-4"></i>32 <span>Back to Chat</span>33 </a>34 </div>35 <div class="p-4">36 <h2 class="text-lg font-bold mb-4">About</h2>37 <div class="space-y-6">38 <div>39 <h3 class="font-medium text-gray-900 mb-2">React Agent Wizard</h3>40 <p class="text-sm text-gray-600">A powerful AI assistant for React developers, providing instant help with your React projects.</p>41 </div>42 <div>43 <h3 class="font-medium text-gray-900 mb-2">Features</h3>44 <ul class="text-sm text-gray-600 space-y-1 list-disc pl-5">45 <li>Instant React code assistance</li>46 <li>Component generation</li>47 <li>Troubleshooting help</li>48 <li>Best practices guidance</li>49 <li>Interactive chat interface</li>50 </ul>51 </div>52 <div>53 <h3 class="font-medium text-gray-900 mb-2">Version</h3>54 <p class="text-sm text-gray-600">1.0.0</p>55 </div>56 </div>57 </div>58 </div>59 60 <!-- Main Content -->61 <div class="flex-1 flex flex-col">62 <header class="bg-white shadow-sm border-b border-gray-200">63 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4 flex justify-between items-center">64 <div class="flex items-center space-x-2">65 <i data-feather="info" class="text-indigo-600 w-6 h-6"></i>66 <h1 class="text-xl font-bold text-gray-900">About React Agent Wizard</h1>67 </div>68 </div>69 </header>70 71 <main class="flex-1 p-8">72 <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6 max-w-3xl">73 <div class="prose">74 <h2 class="text-2xl font-bold text-gray-900 mb-4">Our Mission</h2>75 <p class="text-gray-700 mb-4">76 React Agent Wizard is designed to help developers work more efficiently with React by providing77 instant assistance, code examples, and best practices right when you need them.78 </p>79 80 <h2 class="text-2xl font-bold text-gray-900 mb-4">How It Works</h2>81 <p class="text-gray-700 mb-4">82 Simply describe what you're trying to achieve or ask any React-related question, and the AI83 assistant will provide helpful responses, code snippets, and explanations.84 </p>85 86 <h2 class="text-2xl font-bold text-gray-900 mb-4">Technology</h2>87 <p class="text-gray-700">88 Built with modern web technologies including React, Node.js, and advanced AI models to deliver89 the best possible assistance to developers.90 </p>91 </div>92 </div>93 </main>94 </div>95 </div>96 97 <script>98 // Initialize Vanta.js background99 try {100 VANTA.NET({101 el: "#vanta-bg",102 mouseControls: true,103 touchControls: true,104 gyroControls: false,105 color: 0x4f46e5,106 backgroundColor: 0xf1f5f9,107 points: 12.00,108 maxDistance: 20.00,109 spacing: 15.00110 });111 } catch (error) {112 console.error("Vanta.js initialization error:", error);113 document.getElementById('vanta-bg').style.backgroundColor = '#f1f5f9';114 }115 116 // Initialize Feather Icons117 feather.replace();118 </script>119</body>120</html>