K2大本营徒步指南

import React from 'react';

const App = () => {
  return (
    <div className="App bg-gray-100 min-h-screen">
      <header className="bg-blue-600 text-white py-6">
        <div className="container mx-auto px-4">
          <h1 className="text-4xl font-bold">K2 Base Camp Gondogoro La Trek</h1>
        </div>
      </header>
      <main className="container mx-auto px-4 py-8">
        <section className="mb-8">
          <h2 className="text-3xl font-semibold mb-4">Hero Slider</h2>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
            <img src="https://placehold.co/300x300" alt="Slide 1" className="rounded-lg shadow-lg" />
            <img src="https://placehold.co/300x300" alt="Slide 2" className="rounded-lg shadow-lg" />
            <img src="https://placehold.co/300x300" alt="Slide 3" className="rounded-lg shadow-lg" />
          </div>
        </section>
        <section className="mb-8">
          <h2 className="text-3xl font-semibold mb-4">Quick Facts</h2>
          <div className="bg-white p-6 rounded-lg shadow-lg">
            <ul className="list-disc pl-5">
              <li className="mb-2">Duration: 14 Days</li>
              <li className="mb-2">Difficulty: Challenging</li>
              <li className="mb-2">Best Season: June to September</li>
              <li className="mb-2">Max Altitude: 5,600 meters</li>
            </ul>
          </div>
        </section>
        <section className="mb-8">
          <h2 className="text-3xl font-semibold mb-4">Description</h2>
          <div className="bg-white p-6 rounded-lg shadow-lg">
            <p className="text-gray-700 leading-relaxed">
              The K2 Base Camp Gondogoro La Trek is one of the most challenging and rewarding treks in the world. This trek takes you through some of the most breathtaking landscapes in the Karakoram Range, including the Gondogoro La Pass, which offers stunning views of K2 and other peaks.
            </p>
          </div>
        </section>
        <section className="mb-8">
          <h2 className="text-3xl font-semibold mb-4">Day by Day Itinerary</h2>
          <div className="bg-white p-6 rounded-lg shadow-lg">
            <ul className="list-decimal pl-5">
              <li className="mb-2">Day 1: Arrival in Islamabad</li>
              <li className="mb-2">Day 2: Fly to Skardu</li>
              <li className="mb-2">Day 3: Drive to Askole</li>
              <li className="mb-2">Day 4: Trek to Jhula</li>
              <li className="mb-2">Day 5: Trek to Paiju</li>
              <li className="mb-2">Day 6: Rest Day at Paiju</li>
              <li className="mb-2">Day 7: Trek to Urdukas</li>
              <li className="mb-2">Day 8: Trek to Goro II</li>
              <li className="mb-2">Day 9: Trek to Concordia</li>
              <li className="mb-2">Day 10: Trek to K2 Base Camp</li>
              <li className="mb-2">Day 11: Return to Concordia</li>
              <li className="mb-2">Day 12: Trek to Ali Camp</li>
              <li className="mb-2">Day 13: Cross Gondogoro La and Trek to Khuspang</li>
              <li className="mb-2">Day 14: Trek to Hushe and Drive to Skardu</li>
            </ul>
          </div>
        </section>
        <section className="mb-8">
          <h2 className="text-3xl font-semibold mb-4">Booking Form</h2>
          <div className="bg-white p-6 rounded-lg shadow-lg">
            <form className="space-y-4">
              <div>
                <label className="block text-gray-700">Full Name</label>
                <input type="text" className="w-full px-4 py-2 border rounded-lg" placeholder="John Doe" />
              </div>
              <div>
                <label className="block text-gray-700">Email</label>
                <input type="email" className="w-full px-4 py-2 border rounded-lg" placeholder="[email protected]" />
              </div>
              <div>
                <label className="block text-gray-700">Number of Participants</label>
                <input type="number" className="w-full px-4 py-2 border rounded-lg" placeholder="1" />
              </div>
              <button type="submit" className="bg-blue-600 text-white px-6 py-2 rounded-lg">Book Now</button>
            </form>
          </div>
        </section>
        <section className="mb-8">
          <h2 className="text-3xl font-semibold mb-4">Inquiry Form</h2>
          <div className="bg-white p-6 rounded-lg shadow-lg">
            <form className="space-y-4">
              <div>
                <label className="block text-gray-700">Full Name</label>
                <input type="text" className="w-full px-4 py-2 border rounded-lg" placeholder="John Doe" />
              </div>
              <div>
                <label className="block text-gray-700">Email</label>
                <input type="email" className="w-full px-4 py-2 border rounded-lg" placeholder="[email protected]" />
              </div>
              <div>
                <label className="block text-gray-700">Message</label>
                <textarea className="w-full px-4 py-2 border rounded-lg" placeholder="Your message here..."></textarea>
              </div>
              <button type="submit" className="bg-blue-600 text-white px-6 py-2 rounded-lg">Send Inquiry</button>
            </form>
          </div>
        </section>
        <section className="mb-8">
          <h2 className="text-3xl font-semibold mb-4">Departure Dates</h2>
          <div className="bg-white p-6 rounded-lg shadow-lg">
            <ul className="list-disc pl-5">
              <li className="mb-2">June 1st</li>
              <li className="mb-2">June 10th</li>
              <li className="mb-2">June 20th</li>
              <li className="mb-2">July 1st</li>
              <li className="mb-2">July 10th</li>
              <li className="mb-2">July 20th</li>
              <li className="mb-2">August 1st</li>
              <li className="mb-2">August 10th</li>
              <li className="mb-2">August 20th</li>
              <li className="mb-2">September 1st</li>
              <li className="mb-2">September 10th</li>
              <li className="mb-2">September 20th</li>
            </ul>
          </div>
        </section>
        <section className="mb-8">
          <h2 className="text-3xl font-semibold mb-4">Reviews</h2>
          <div className="bg-white p-6 rounded-lg shadow-lg">
            <div className="mb-4">
              <h3 className="text-xl font-semibold">John Doe</h3>
              <p className="text-gray-700">"An incredible experience! The trek was challenging but the views were worth every step."</p>
            </div>
            <div className="mb-4">
              <h3 className="text-xl font-semibold">Jane Smith</h3>
              <p className="text-gray-700">"The best trek I've ever done. The guides were knowledgeable and the scenery was breathtaking."</p>
            </div>
            <div className="mb-4">
              <h3 className="text-xl font-semibold">Emily Johnson</h3>
              <p className="text-gray-700">"A once in a lifetime experience. I highly recommend this trek to anyone looking for an adventure."</p>
            </div>
          </div>
        </section>
        <section className="mb-8">
          <h2 className="text-3xl font-semibold mb-4">Practical Information</h2>
          <div className="bg-white p-6 rounded-lg shadow-lg">
            <p className="text-gray-700 leading-relaxed">
              Before embarking on the K2 Base Camp Gondogoro La Trek, it's important to be well-prepared. Ensure you have the necessary gear, including sturdy hiking boots, warm clothing, and a good quality sleeping bag. It's also recommended to acclimatize properly to avoid altitude sickness. Always travel with a reputable guide or tour operator.
            </p>
          </div>
        </section>
      </main>
      <footer className="bg-blue-600 text-white py-6">
        <div className="container mx-auto px-4 text-center">
          <p>&copy; 2025 K2 Base Camp Gondogoro La Trek. All rights reserved.</p>
        </div>
      </footer>
    </div>
  );
};

export default App;