旅游网站落地页设计

import React from 'react';

const App = () => {
  return (
    <div className="min-h-screen bg-gradient-to-r from-blue-500 via-purple-500 to-indigo-500">
      <header className="bg-white shadow-lg">
        <nav className="container mx-auto px-6 py-4">
          <div className="flex items-center justify-between">
            <div className="text-3xl font-bold text-gray-800">TravelNest</div>
            <div className="hidden md:flex space-x-10">
              <a href="#home" className="text-gray-800 hover:text-indigo-600">Home</a>
              <a href="#destinations" className="text-gray-800 hover:text-indigo-600">Destinations</a>
              <a href="#packages" className="text-gray-800 hover:text-indigo-600">Packages</a>
              <a href="#testimonials" className="text-gray-800 hover:text-indigo-600">Testimonials</a>
              <a href="#about" className="text-gray-800 hover:text-indigo-600">About</a>
              <a href="#contact" className="text-gray-800 hover:text-indigo-600">Contact</a>
            </div>
          </div>
        </nav>
      </header>

      <section id="home" className="container mx-auto px-6 py-20 text-center">
        <h1 className="text-6xl font-bold text-white mb-6">Discover Amazing Places</h1>
        <p className="text-xl text-white mb-12">Experience the beauty of the world with TravelNest</p>
        <a href="#destinations" className="bg-indigo-600 text-white px-8 py-3 rounded-full hover:bg-indigo-700">Explore Destinations</a>
      </section>

      <section id="destinations" className="bg-white py-20">
        <div className="container mx-auto px-6">
          <h2 className="text-4xl font-bold text-gray-800 mb-12 text-center">Popular Destinations</h2>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            {[
              { name: 'Paris', image: 'https://placehold.co/400X400' },
              { name: 'Tokyo', image: 'https://placehold.co/400X400' },
              { name: 'New York', image: 'https://placehold.co/400X400' }
            ].map((dest, index) => (
              <div key={index} className="bg-gray-100 rounded-lg overflow-hidden shadow-lg">
                <img src={dest.image} alt={dest.name} className="w-full h-64 object-cover" />
                <div className="p-6">
                  <h3 className="text-2xl font-bold text-gray-800 mb-2">{dest.name}</h3>
                  <p className="text-gray-600">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                  <a href="#" className="mt-4 inline-block bg-indigo-600 text-white px-6 py-2 rounded-full hover:bg-indigo-700">Learn More</a>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section id="packages" className="container mx-auto px-6 py-20">
        <h2 className="text-4xl font-bold text-gray-800 mb-12 text-center">Travel Packages</h2>
        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
          {[
            { name: 'Weekend Getaway', price: '$299', image: 'https://placehold.co/300X300' },
            { name: 'Adventure Travel', price: '$499', image: 'https://placehold.co/300X300' },
            { name: 'Luxury Escape', price: '$899', image: 'https://placehold.co/300X300' }
          ].map((pkg, index) => (
            <div key={index} className="bg-gray-100 rounded-lg overflow-hidden shadow-lg">
              <img src={pkg.image} alt={pkg.name} className="w-full h-64 object-cover" />
              <div className="p-6">
                <h3 className="text-2xl font-bold text-gray-800 mb-2">{pkg.name}</h3>
                <p className="text-gray-600">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                <div className="mt-4 flex items-center justify-between">
                  <span className="text-2xl text-indigo-600 font-bold">{pkg.price}</span>
                  <a href="#" className="bg-indigo-600 text-white px-6 py-2 rounded-full hover:bg-indigo-700">Book Now</a>
                </div>
              </div>
            </div>
          ))}
        </div>
      </section>

      <section id="testimonials" className="bg-gray-100 py-20">
        <div className="container mx-auto px-6">
          <h2 className="text-4xl font-bold text-gray-800 mb-12 text-center">What Our Clients Say</h2>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            {[
              { name: 'John Doe', comment: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.', image: 'https://placehold.co/100X100' },
              { name: 'Jane Smith', comment: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.', image: 'https://placehold.co/100X100' },
              { name: 'Mike Ross', comment: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.', image: 'https://placehold.co/100X100' }
            ].map((testimonial, index) => (
              <div key={index} className="bg-white rounded-lg overflow-hidden shadow-lg p-6">
                <img src={testimonial.image} alt={testimonial.name} className="w-24 h-24 rounded-full mx-auto mb-4" />
                <h3 className="text-xl font-bold text-gray-800 mb-2 text-center">{testimonial.name}</h3>
                <p className="text-gray-600 text-center">{testimonial.comment}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section id="about" className="container mx-auto px-6 py-20">
        <h2 className="text-4xl font-bold text-gray-800 mb-12 text-center">About TravelNest</h2>
        <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
          <div>
            <img src="https://placehold.co/600X400" alt="About Us" className="w-full h-auto rounded-lg shadow-lg" />
          </div>
          <div>
            <p className="text-gray-600 mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            <p className="text-gray-600 mb-4">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
            <p className="text-gray-600">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
          </div>
        </div>
      </section>

      <section id="contact" className="bg-gray-100 py-20">
        <div className="container mx-auto px-6">
          <h2 className="text-4xl font-bold text-gray-800 mb-12 text-center">Contact Us</h2>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
            <div>
              <iframe
                src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3153.8354345093747!2d144.95373531531615!3d-37.816279742021135!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6ad642af0f11fd81%3A0xf577d6d0e1e5b5b1!2sMelbourne%20VIC%2C%20Australia!5e0!3m2!1sen!2sus!4v1625070414742!5m2!1sen!2sus"
                width="100%" height="400" style={{border:0}} allowfullscreen loading="lazy"></iframe>
            </div>
            <div>
              <form className="bg-white rounded-lg shadow-lg p-6">
                <div className="mb-4">
                  <label className="block text-gray-800 font-bold mb-2" htmlFor="name">Name</label>
                  <input className="w-full px-3 py-2 border rounded-lg focus:outline-none focus:border-indigo-600" type="text" id="name" placeholder="Your Name" />
                </div>
                <div className="mb-4">
                  <label className="block text-gray-800 font-bold mb-2" htmlFor="email">Email</label>
                  <input className="w-full px-3 py-2 border rounded-lg focus:outline-none focus:border-indigo-600" type="email" id="email" placeholder="Your Email" />
                </div>
                <div className="mb-4">
                  <label className="block text-gray-800 font-bold mb-2" htmlFor="message">Message</label>
                  <textarea className="w-full px-3 py-2 border rounded-lg focus:outline-none focus:border-indigo-600" id="message" rows="5" placeholder="Your Message"></textarea>
                </div>
                <div className="flex justify-end">
                  <button type="submit" className="bg-indigo-600 text-white px-6 py-2 rounded-full hover:bg-indigo-700">Send Message</button>
                </div>
              </form>
            </div>
          </div>
        </div>
      </section>

      <footer className="bg-gray-800 text-white py-10">
        <div className="container mx-auto px-6 text-center">
          <p>© 2025 TravelNest. All rights reserved.</p>
        </div>
      </footer>
    </div>
  );
};

export default App;