打造任务管理应用

import React from 'react';

const App = () => {
  return (
    <div className="min-h-screen bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 text-white">
      {/* Navigation */}
      <nav className="p-6 bg-black bg-opacity-50">
        <div className="container mx-auto flex justify-between items-center">
          <h1 className="text-3xl font-bold">TaskMaster</h1>
          <div className="flex space-x-4">
            <button className="px-4 py-2 bg-blue-600 rounded-lg hover:bg-blue-700">Sign In</button>
            <button className="px-4 py-2 bg-green-600 rounded-lg hover:bg-green-700">Sign Up</button>
          </div>
        </div>
      </nav>

      {/* Hero Section */}
      <div className="container mx-auto px-6 py-16 flex flex-col items-center text-center">
        <h2 className="text-5xl font-bold mb-6">Organize Your Life with TaskMaster</h2>
        <p className="mb-8 text-xl">Your ultimate task management solution. Stay organized, efficient, and stress-free.</p>
        <button className="px-6 py-3 bg-yellow-400 text-black rounded-lg hover:bg-yellow-500">Get Started</button>
      </div>

      {/* Features Section */}
      <div className="bg-white text-gray-800 py-16">
        <div className="container mx-auto px-6">
          <h3 className="text-3xl font-bold text-center mb-12">Features</h3>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            <div className="text-center p-6 rounded-lg shadow-lg">
              <img src="https://placehold.co/150x150" alt="Feature" className="mx-auto mb-6"/>
              <h4 className="text-xl font-bold mb-4">Task Management</h4>
              <p>Easily create, edit, and organize your tasks.</p>
            </div>
            <div className="text-center p-6 rounded-lg shadow-lg">
              <img src="https://placehold.co/150x150" alt="Feature" className="mx-auto mb-6"/>
              <h4 className="text-xl font-bold mb-4">Calendar Integration</h4>
              <p>Sync your tasks with your calendar seamlessly.</p>
            </div>
            <div className="text-center p-6 rounded-lg shadow-lg">
              <img src="https://placehold.co/150x150" alt="Feature" className="mx-auto mb-6"/>
              <h4 className="text-xl font-bold mb-4">Collaboration</h4>
              <p>Share and collaborate on tasks with your team.</p>
            </div>
          </div>
        </div>
      </div>

      {/* Testimonials Section */}
      <div className="bg-gray-100 text-gray-800 py-16">
        <div className="container mx-auto px-6">
          <h3 className="text-3xl font-bold text-center mb-12">What Our Users Say</h3>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
            <div className="bg-white p-6 rounded-lg shadow-lg">
              <p>"TaskMaster has revolutionized the way I manage my tasks. Highly recommended!"</p>
              <p className="text-sm text-gray-600 mt-4">- John Doe</p>
            </div>
            <div className="bg-white p-6 rounded-lg shadow-lg">
              <p>"The calendar integration is a game-changer. I can't imagine my life without it."</p>
              <p className="text-sm text-gray-600 mt-4">- Jane Smith</p>
            </div>
          </div>
        </div>
      </div>

      {/* Pricing Section */}
      <div className="bg-white text-gray-800 py-16">
        <div className="container mx-auto px-6">
          <h3 className="text-3xl font-bold text-center mb-12">Pricing</h3>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            <div className="text-center p-6 rounded-lg shadow-lg">
              <h4 className="text-xl font-bold mb-4">Basic</h4>
              <p className="text-2xl font-bold mb-4">$5<span className="text-sm">/month</span></p>
              <ul className="mb-6">
                <li>Task Management</li>
                <li>Basic Support</li>
              </ul>
              <button className="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700">Choose Plan</button>
            </div>
            <div className="text-center p-6 rounded-lg shadow-lg bg-gradient-to-r from-purple-500 to-pink-500 text-white">
              <h4 className="text-xl font-bold mb-4">Pro</h4>
              <p className="text-2xl font-bold mb-4">$10<span className="text-sm">/month</span></p>
              <ul className="mb-6">
                <li>Task Management</li>
                <li>Calendar Integration</li>
                <li>Priority Support</li>
              </ul>
              <button className="px-6 py-2 bg-white text-purple-600 rounded-lg hover:bg-gray-100">Choose Plan</button>
            </div>
            <div className="text-center p-6 rounded-lg shadow-lg">
              <h4 className="text-xl font-bold mb-4">Enterprise</h4>
              <p className="text-2xl font-bold mb-4">$20<span className="text-sm">/month</span></p>
              <ul className="mb-6">
                <li>Task Management</li>
                <li>Calendar Integration</li>
                <li>Collaboration</li>
                <li>Dedicated Support</li>
              </ul>
              <button className="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700">Choose Plan</button>
            </div>
          </div>
        </div>
      </div>

      {/* Footer */}
      <footer className="bg-black bg-opacity-50 text-white py-6">
        <div className="container mx-auto px-6 flex justify-between items-center">
          <p>&copy; 2025 TaskMaster. All rights reserved.</p>
          <div className="flex space-x-4">
            <a href="#" className="hover:text-gray-400">Privacy Policy</a>
            <a href="#" className="hover:text-gray-400">Terms of Service</a>
          </div>
        </div>
      </footer>
    </div>
  );
};

export default App;