学生AI学习应用

import React from 'react';

const App = () => {
  return (
    <div className="min-h-screen bg-gradient-to-r from-blue-50 to-purple-50">
      <header className="bg-white shadow-lg">
        <div className="container mx-auto px-6 py-4">
          <h1 className="text-3xl font-bold text-gray-800">AI Learning Hub</h1>
          <p className="text-gray-600">Empowering students with AI tools like ChatGPT, Deepseek, and more.</p>
        </div>
      </header>

      <main className="container mx-auto px-6 py-8">
        <section className="mb-12">
          <h2 className="text-2xl font-semibold text-gray-800 mb-4">Featured AI Tools</h2>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            <div className="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition-shadow">
              <img src="https://placehold.co/300x200" alt="ChatGPT" className="w-full h-48 object-cover rounded-t-lg" />
              <h3 className="text-xl font-semibold text-gray-800 mt-4">ChatGPT</h3>
              <p className="text-gray-600 mt-2">Learn how to interact with AI for creative and technical tasks.</p>
            </div>
            <div className="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition-shadow">
              <img src="https://placehold.co/300x200" alt="Deepseek" className="w-full h-48 object-cover rounded-t-lg" />
              <h3 className="text-xl font-semibold text-gray-800 mt-4">Deepseek</h3>
              <p className="text-gray-600 mt-2">Explore deep learning techniques and applications.</p>
            </div>
            <div className="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition-shadow">
              <img src="https://placehold.co/300x200" alt="AI Tools" className="w-full h-48 object-cover rounded-t-lg" />
              <h3 className="text-xl font-semibold text-gray-800 mt-4">Other AI Tools</h3>
              <p className="text-gray-600 mt-2">Discover a variety of AI tools to enhance your learning.</p>
            </div>
          </div>
        </section>

        <section className="mb-12">
          <h2 className="text-2xl font-semibold text-gray-800 mb-4">Learning Resources</h2>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            <div className="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition-shadow">
              <h3 className="text-xl font-semibold text-gray-800">Tutorials</h3>
              <p className="text-gray-600 mt-2">Step-by-step guides to master AI tools.</p>
            </div>
            <div className="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition-shadow">
              <h3 className="text-xl font-semibold text-gray-800">Case Studies</h3>
              <p className="text-gray-600 mt-2">Real-world applications of AI in various industries.</p>
            </div>
            <div className="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition-shadow">
              <h3 className="text-xl font-semibold text-gray-800">Community</h3>
              <p className="text-gray-600 mt-2">Join discussions and share knowledge with peers.</p>
            </div>
          </div>
        </section>

        <section className="mb-12">
          <h2 className="text-2xl font-semibold text-gray-800 mb-4">Upcoming Events</h2>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            <div className="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition-shadow">
              <h3 className="text-xl font-semibold text-gray-800">AI Workshop</h3>
              <p className="text-gray-600 mt-2">Hands-on session to build AI models.</p>
            </div>
            <div className="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition-shadow">
              <h3 className="text-xl font-semibold text-gray-800">Tech Talk</h3>
              <p className="text-gray-600 mt-2">Insights from industry experts on AI trends.</p>
            </div>
            <div className="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition-shadow">
              <h3 className="text-xl font-semibold text-gray-800">Hackathon</h3>
              <p className="text-gray-600 mt-2">Compete to solve real-world problems using AI.</p>
            </div>
          </div>
        </section>

        <section className="mb-12">
          <h2 className="text-2xl font-semibold text-gray-800 mb-4">Testimonials</h2>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            <div className="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition-shadow">
              <p className="text-gray-600">"This platform has transformed the way I learn AI. Highly recommended!"</p>
              <p className="text-gray-800 font-semibold mt-2">- John Doe</p>
            </div>
            <div className="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition-shadow">
              <p className="text-gray-600">"The resources are top-notch and the community is very supportive."</p>
              <p className="text-gray-800 font-semibold mt-2">- Jane Smith</p>
            </div>
            <div className="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition-shadow">
              <p className="text-gray-600">"I've gained practical skills that are directly applicable to my career."</p>
              <p className="text-gray-800 font-semibold mt-2">- Alex Johnson</p>
            </div>
          </div>
        </section>

        <section className="mb-12">
          <h2 className="text-2xl font-semibold text-gray-800 mb-4">Subscribe to Our Newsletter</h2>
          <form className="bg-white p-6 rounded-lg shadow-md">
            <div className="flex flex-col space-y-4">
              <input type="email" placeholder="Enter your email" className="p-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500" />
              <button type="submit" className="bg-purple-500 text-white p-2 rounded-lg hover:bg-purple-600 transition-colors">Subscribe</button>
            </div>
          </form>
        </section>

        <section className="mb-12">
          <h2 className="text-2xl font-semibold text-gray-800 mb-4">Contact Us</h2>
          <div className="bg-white p-6 rounded-lg shadow-md">
            <p className="text-gray-600">Have questions? Reach out to us at <a href="mailto:[email protected]" className="text-purple-500 hover:underline">[email protected]</a>.</p>
          </div>
        </section>
      </main>

      <footer className="bg-gray-800 text-white py-6">
        <div className="container mx-auto px-6">
          <p className="text-center">&copy; 2025 AI Learning Hub. All rights reserved.</p>
        </div>
      </footer>
    </div>
  );
};

export default App;