|
| 1 | +<section id="features" class="py-20 bg-white"> |
| 2 | + <div class="container mx-auto px-4"> |
| 3 | + <div class="text-center mb-16"> |
| 4 | + <h2 class="text-3xl font-bold mb-4">Powerful Features for React Developers</h2> |
| 5 | + <p class="text-xl text-gray-600 max-w-3xl mx-auto"> |
| 6 | + ReactStream provides comprehensive tooling to improve your development workflow, catch bugs early, and optimize your components. |
| 7 | + </p> |
| 8 | + </div> |
| 9 | + |
| 10 | + <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> |
| 11 | + <!-- Feature 1 --> |
| 12 | + <div class="feature-card bg-white rounded-lg p-6 shadow-md border border-gray-100"> |
| 13 | + <div class="h-12 w-12 bg-indigo-100 rounded-lg flex items-center justify-center mb-4"> |
| 14 | + <i class="fas fa-code text-indigo-600 text-2xl"></i> |
| 15 | + </div> |
| 16 | + <h3 class="text-xl font-semibold mb-2">Syntax Analysis</h3> |
| 17 | + <p class="text-gray-600"> |
| 18 | + Validate your component's syntax, detect unused imports, and find common React patterns that could lead to bugs. |
| 19 | + </p> |
| 20 | + </div> |
| 21 | + |
| 22 | + <!-- Feature 2 --> |
| 23 | + <div class="feature-card bg-white rounded-lg p-6 shadow-md border border-gray-100"> |
| 24 | + <div class="h-12 w-12 bg-green-100 rounded-lg flex items-center justify-center mb-4"> |
| 25 | + <i class="fas fa-sync-alt text-green-600 text-2xl"></i> |
| 26 | + </div> |
| 27 | + <h3 class="text-xl font-semibold mb-2">Hook Analysis</h3> |
| 28 | + <p class="text-gray-600"> |
| 29 | + Ensure React hooks are used correctly, detect dependency issues, and get optimization suggestions for useEffect, useState, and more. |
| 30 | + </p> |
| 31 | + </div> |
| 32 | + |
| 33 | + <!-- Feature 3 --> |
| 34 | + <div class="feature-card bg-white rounded-lg p-6 shadow-md border border-gray-100"> |
| 35 | + <div class="h-12 w-12 bg-purple-100 rounded-lg flex items-center justify-center mb-4"> |
| 36 | + <i class="fas fa-tachometer-alt text-purple-600 text-2xl"></i> |
| 37 | + </div> |
| 38 | + <h3 class="text-xl font-semibold mb-2">Performance Analysis</h3> |
| 39 | + <p class="text-gray-600"> |
| 40 | + Detect potential performance bottlenecks, unnecessary re-renders, and missed memoization opportunities in your components. |
| 41 | + </p> |
| 42 | + </div> |
| 43 | + |
| 44 | + <!-- Feature 4 --> |
| 45 | + <div class="feature-card bg-white rounded-lg p-6 shadow-md border border-gray-100"> |
| 46 | + <div class="h-12 w-12 bg-blue-100 rounded-lg flex items-center justify-center mb-4"> |
| 47 | + <i class="fas fa-universal-access text-blue-600 text-2xl"></i> |
| 48 | + </div> |
| 49 | + <h3 class="text-xl font-semibold mb-2">Accessibility Checks</h3> |
| 50 | + <p class="text-gray-600"> |
| 51 | + Identify accessibility issues like missing alt text, improper ARIA attributes, and contrast problems to make your components more inclusive. |
| 52 | + </p> |
| 53 | + </div> |
| 54 | + |
| 55 | + <!-- Feature 5 --> |
| 56 | + <div class="feature-card bg-white rounded-lg p-6 shadow-md border border-gray-100"> |
| 57 | + <div class="h-12 w-12 bg-yellow-100 rounded-lg flex items-center justify-center mb-4"> |
| 58 | + <i class="fas fa-server text-yellow-600 text-2xl"></i> |
| 59 | + </div> |
| 60 | + <h3 class="text-xl font-semibold mb-2">Development Server</h3> |
| 61 | + <p class="text-gray-600"> |
| 62 | + Test and debug components in isolation with hot module replacement, built-in UI components, and support for multiple components. |
| 63 | + </p> |
| 64 | + </div> |
| 65 | + |
| 66 | + <!-- Feature 6 --> |
| 67 | + <div class="feature-card bg-white rounded-lg p-6 shadow-md border border-gray-100"> |
| 68 | + <div class="h-12 w-12 bg-red-100 rounded-lg flex items-center justify-center mb-4"> |
| 69 | + <i class="fas fa-bug text-red-600 text-2xl"></i> |
| 70 | + </div> |
| 71 | + <h3 class="text-xl font-semibold mb-2">Automated Fixes</h3> |
| 72 | + <p class="text-gray-600"> |
| 73 | + Automatically fix common issues and get suggestions for more complex problems, saving you time and preventing bugs. |
| 74 | + </p> |
| 75 | + </div> |
| 76 | + </div> |
| 77 | + </div> |
| 78 | +</section> |
0 commit comments