创建完整网站

import React from 'react';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="bg-blue-600 text-white p-4">
        <h1 className="text-3xl font-bold">MindGuru Life</h1>
      </header>
      <nav className="bg-blue-500 text-white p-2">
        <ul className="flex space-x-4">
          <li>Home</li>
          <li>About</li>
          <li>Services</li>
          <li>Contact</li>
        </ul>
      </nav>
      <main className="p-4">
        <section className="mb-8">
          <h2 className="text-2xl font-bold mb-4">Welcome to MindGuru Life</h2>
          <p className="text-gray-700">Discover your inner peace and improve your mental wellbeing with our expert guidance.</p>
        </section>
        <section className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-8">
          <div className="bg-white p-4 shadow-lg rounded-lg">
            <img src="https://placehold.co/300x200" alt="Service 1" className="w-full h-48 object-cover rounded-md" />
            <h3 className="text-xl font-bold mt-2">Meditation</h3>
            <p className="text-gray-600">Learn meditation techniques to reduce stress and enhance mindfulness.</p>
          </div>
          <div className="bg-white p-4 shadow-lg rounded-lg">
            <img src="https://placehold.co/300x200" alt="Service 2" className="w-full h-48 object-cover rounded-md" />
            <h3 className="text-xl font-bold mt-2">Counseling</h3>
            <p className="text-gray-600">Professional counseling services tailored to your individual needs.</p>
          </div>
          <div className="bg-white p-4 shadow-lg rounded-lg">
            <img src="https://placehold.co/300x200" alt="Service 3" className="w-full h-48 object-cover rounded-md" />
            <h3 className="text-xl font-bold mt-2">Workshops</h3>
            <p className="text-gray-600">Join our workshops to explore various topics on mental health and wellbeing.</p>
          </div>
        </section>
        <section className="bg-blue-50 p-6 rounded-lg mb-8">
          <h2 className="text-2xl font-bold mb-4">About Us</h2>
          <p className="text-gray-700">MindGuru Life is dedicated to helping individuals achieve mental clarity and emotional balance through a variety of services and programs.</p>
        </section>
        <section className="mb-8">
          <h2 className="text-2xl font-bold mb-4">Testimonials</h2>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div className="bg-white p-4 shadow-lg rounded-lg">
              <p className="text-gray-600">"MindGuru Life has transformed my approach to mental health. Highly recommended!"</p>
              <p className="text-gray-500">- Jane Doe</p>
            </div>
            <div className="bg-white p-4 shadow-lg rounded-lg">
              <p className="text-gray-600">"Their workshops are insightful and very helpful for personal growth."</p>
              <p className="text-gray-500">- John Smith</p>
            </div>
          </div>
        </section>
        <section className="bg-blue-600 text-white p-6 rounded-lg mb-8">
          <h2 className="text-2xl font-bold mb-4">Contact Us</h2>
          <p className="mb-4">Get in touch with us to learn more about our services or to schedule a session.</p>
          <form className="space-y-4">
            <input type="text" placeholder="Your Name" className="w-full p-2 rounded text-black" />
            <input type="email" placeholder="Your Email" className="w-full p-2 rounded text-black" />
            <textarea placeholder="Your Message" className="w-full p-2 rounded text-black"></textarea>
            <button type="submit" className="bg-white text-blue-600 px-4 py-2 rounded">Send</button>
          </form>
        </section>
      </main>
      <footer className="bg-blue-800 text-white p-4">
        <p>© 2025 MindGuru Life. All rights reserved.</p>
      </footer>
    </div>
  );
}

export default App;