موقع ترجمة شامل

import React from 'react';

const App = () => {
  return (
    <div className="App min-h-screen bg-gradient-to-br from-blue-500 to-purple-600 text-white">
      {/* Header */}
      <header className="text-center py-10">
        <h1 className="text-5xl font-bold">Translation Platform</h1>
        <p className="text-xl mt-2">Translate up to 1,000,000 words and 10,000 lines across all languages.</p>
      </header>

      {/* Translation Input */}
      <section className="container mx-auto px-4 py-10">
        <div className="bg-white rounded-lg shadow-lg p-6">
          <textarea className="w-full h-48 p-4 text-gray-800 rounded-lg border border-gray-200" placeholder="Enter text to translate..."></textarea>
          <button className="mt-4 w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Translate</button>
        </div>
      </section>

      {/* Features */}
      <section className="bg-gray-100 text-gray-800 py-10">
        <div className="container mx-auto px-4">
          <h2 className="text-3xl font-bold text-center mb-8">Features</h2>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
            <div className="text-center">
              <h3 className="text-xl font-semibold mb-2">Multi-Language Support</h3>
              <p className="text-gray-600">Translate text into any language effortlessly.</p>
            </div>
            <div className="text-center">
              <h3 className="text-xl font-semibold mb-2">Bulk Translation</h3>
              <p className="text-gray-600">Handle large volumes of text up to 1,000,000 words.</p>
            </div>
            <div className="text-center">
              <h3 className="text-xl font-semibold mb-2">Line-by-Line Accuracy</h3>
              <p className="text-gray-600">Precise translation for up to 10,000 lines of text.</p>
            </div>
          </div>
        </div>
      </section>

      {/* Testimonials */}
      <section className="py-10">
        <div className="container mx-auto px-4">
          <h2 className="text-3xl font-bold text-center mb-8">What Our Users Say</h2>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div className="bg-white rounded-lg shadow-lg p-6">
              <p className="text-gray-800 italic">"The best translation platform I've ever used!"</p>
              <p className="text-gray-600 mt-2">- User 1</p>
            </div>
            <div className="bg-white rounded-lg shadow-lg p-6">
              <p className="text-gray-800 italic">"Handles large texts with ease and accuracy."</p>
              <p className="text-gray-600 mt-2">- User 2</p>
            </div>
          </div>
        </div>
      </section>

      {/* Footer */}
      <footer className="bg-gray-800 text-white text-center py-6">
        <p>&copy; 2025 Translation Platform. All rights reserved.</p>
      </footer>
    </div>
  );
};

export default App;