Water Delivery App

import React from 'react';

const App = () => {
  return (
    <div className="App bg-gray-100 min-h-screen">
      <header className="bg-blue-600 text-white p-6">
        <h1 className="text-3xl font-bold">Water Home Delivery</h1>
      </header>
      <main className="p-6">
        <section className="mb-8">
          <h2 className="text-2xl font-semibold mb-4">Order Water Bottles</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">
              <img src="https://placehold.co/300x300" alt="Water Bottle" className="mb-4 rounded-lg" />
              <h3 className="text-xl font-semibold mb-2">Natural Spring Water</h3>
              <p className="text-gray-700 mb-4">Pure and refreshing natural spring water.</p>
              <button className="bg-blue-600 text-white px-4 py-2 rounded-lg">Order Now</button>
            </div>
            <div className="bg-white p-6 rounded-lg shadow-md">
              <img src="https://placehold.co/300x300" alt="Water Bottle" className="mb-4 rounded-lg" />
              <h3 className="text-xl font-semibold mb-2">Mineral Water</h3>
              <p className="text-gray-700 mb-4">Rich in essential minerals for your health.</p>
              <button className="bg-blue-600 text-white px-4 py-2 rounded-lg">Order Now</button>
            </div>
            <div className="bg-white p-6 rounded-lg shadow-md">
              <img src="https://placehold.co/300x300" alt="Water Bottle" className="mb-4 rounded-lg" />
              <h3 className="text-xl font-semibold mb-2">Sparkling Water</h3>
              <p className="text-gray-700 mb-4">Effervescent and refreshing sparkling water.</p>
              <button className="bg-blue-600 text-white px-4 py-2 rounded-lg">Order Now</button>
            </div>
          </div>
        </section>
        <section className="mb-8">
          <h2 className="text-2xl font-semibold mb-4">How It Works</h2>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
            <div className="bg-white p-6 rounded-lg shadow-md">
              <h3 className="text-xl font-semibold mb-2">1. Choose Your Water</h3>
              <p className="text-gray-700">Select from our wide range of water options.</p>
            </div>
            <div className="bg-white p-6 rounded-lg shadow-md">
              <h3 className="text-xl font-semibold mb-2">2. Enter Your Location</h3>
              <p className="text-gray-700">Provide your current location for delivery.</p>
            </div>
            <div className="bg-white p-6 rounded-lg shadow-md">
              <h3 className="text-xl font-semibold mb-2">3. Get It Delivered</h3>
              <p className="text-gray-700">Enjoy your water delivered to your doorstep.</p>
            </div>
          </div>
        </section>
        <section className="mb-8">
          <h2 className="text-2xl font-semibold mb-4">Why Choose Us?</h2>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
            <div className="bg-white p-6 rounded-lg shadow-md">
              <h3 className="text-xl font-semibold mb-2">Fast Delivery</h3>
              <p className="text-gray-700">We deliver your water quickly and efficiently.</p>
            </div>
            <div className="bg-white p-6 rounded-lg shadow-md">
              <h3 className="text-xl font-semibold mb-2">High Quality</h3>
              <p className="text-gray-700">Our water is sourced from the best natural springs.</p>
            </div>
            <div className="bg-white p-6 rounded-lg shadow-md">
              <h3 className="text-xl font-semibold mb-2">Eco-Friendly</h3>
              <p className="text-gray-700">We use sustainable practices to protect the environment.</p>
            </div>
            <div className="bg-white p-6 rounded-lg shadow-md">
              <h3 className="text-xl font-semibold mb-2">Customer Support</h3>
              <p className="text-gray-700">Our team is always here to help you.</p>
            </div>
          </div>
        </section>
        <section className="mb-8">
          <h2 className="text-2xl font-semibold mb-4">Customer Reviews</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">
              <p className="text-gray-700 mb-4">"The water is so refreshing and the delivery was super fast!"</p>
              <p className="text-gray-600">- John Doe</p>
            </div>
            <div className="bg-white p-6 rounded-lg shadow-md">
              <p className="text-gray-700 mb-4">"I love the eco-friendly packaging. Great service!"</p>
              <p className="text-gray-600">- Jane Smith</p>
            </div>
            <div className="bg-white p-6 rounded-lg shadow-md">
              <p className="text-gray-700 mb-4">"The mineral water is my favorite. Highly recommend!"</p>
              <p className="text-gray-600">- Mike Johnson</p>
            </div>
          </div>
        </section>
        <section className="mb-8">
          <h2 className="text-2xl font-semibold mb-4">Our Partners</h2>
          <div className="grid grid-cols-2 md:grid-cols-4 gap-6">
            <img src="https://placehold.co/150x150" alt="Partner 1" className="rounded-lg" />
            <img src="https://placehold.co/150x150" alt="Partner 2" className="rounded-lg" />
            <img src="https://placehold.co/150x150" alt="Partner 3" className="rounded-lg" />
            <img src="https://placehold.co/150x150" alt="Partner 4" className="rounded-lg" />
          </div>
        </section>
        <section className="mb-8">
          <h2 className="text-2xl font-semibold mb-4">Contact Us</h2>
          <form className="bg-white p-6 rounded-lg shadow-md">
            <div className="mb-4">
              <label className="block text-gray-700 mb-2">Name</label>
              <input type="text" className="w-full px-4 py-2 border rounded-lg" />
            </div>
            <div className="mb-4">
              <label className="block text-gray-700 mb-2">Email</label>
              <input type="email" className="w-full px-4 py-2 border rounded-lg" />
            </div>
            <div className="mb-4">
              <label className="block text-gray-700 mb-2">Message</label>
              <textarea className="w-full px-4 py-2 border rounded-lg"></textarea>
            </div>
            <button type="submit" className="bg-blue-600 text-white px-4 py-2 rounded-lg">Send Message</button>
          </form>
        </section>
      </main>
      <footer className="bg-blue-600 text-white p-6">
        <p className="text-center">© 2025 Water Home Delivery. All rights reserved.</p>
      </footer>
    </div>
  );
};

export default App;