Next.js Vape Website

import React from 'react';

const App = () => {
  return (
    <div className="bg-gray-100 min-h-screen">
      {/* Landing Page */}
      <header className="bg-blue-600 text-white py-10">
        <div className="container mx-auto px-6 text-center">
          <h1 className="text-5xl font-bold mb-4">Manchester Vape</h1>
          <p className="text-xl">Your Ultimate Destination for Premium Vaping Products</p>
        </div>
      </header>

      {/* Product Listing */}
      <section className="container mx-auto px-6 py-10">
        <h2 className="text-3xl font-bold text-center mb-8">Our Products</h2>
        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
          {[1, 2, 3].map((product) => (
            <div key={product} className="bg-white shadow-lg rounded-lg overflow-hidden">
              <img src="https://placehold.co/300X300" alt="Product" className="w-full" />
              <div className="p-6">
                <h3 className="text-xl font-bold mb-2">Vape Product {product}</h3>
                <p className="text-gray-700">High-quality vaping experience.</p>
                <button className="mt-4 bg-blue-600 text-white py-2 px-4 rounded hover:bg-blue-700">Add to Cart</button>
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* Product Detail */}
      <section className="bg-white py-10">
        <div className="container mx-auto px-6">
          <h2 className="text-3xl font-bold text-center mb-8">Product Detail</h2>
          <div className="flex flex-col md:flex-row items-center">
            <img src="https://placehold.co/300X300" alt="Product Detail" className="w-full md:w-1/2" />
            <div className="md:ml-8 mt-6 md:mt-0">
              <h3 className="text-2xl font-bold mb-4">Vape Product 1</h3>
              <p className="text-gray-700 mb-4">Experience the best vaping with our top-notch product.</p>
              <button className="bg-blue-600 text-white py-2 px-4 rounded hover:bg-blue-700">Add to Cart</button>
            </div>
          </div>
        </div>
      </section>

      {/* Checkout */}
      <section className="bg-gray-200 py-10">
        <div className="container mx-auto px-6">
          <h2 className="text-3xl font-bold text-center mb-8">Checkout</h2>
          <div className="bg-white p-6 rounded-lg shadow-lg">
            <h3 className="text-2xl font-bold mb-4">Order Summary</h3>
            <p className="text-gray-700 mb-4">Total: $99.99</p>
            <button className="bg-green-600 text-white py-2 px-4 rounded hover:bg-green-700">Place Order</button>
          </div>
        </div>
      </section>

      {/* Footer */}
      <footer className="bg-blue-600 text-white py-6">
        <div className="container mx-auto px-6 text-center">
          <p>&copy; 2025 Manchester Vape. All rights reserved.</p>
        </div>
      </footer>
    </div>
  );
};

export default App;