パン画像生成

import React from 'react';

const App = () => {
  return (
    <div className="App bg-gray-100 min-h-screen p-8">
      <header className="text-center mb-12">
        <h1 className="text-5xl font-bold text-gray-800">パンの画像生成</h1>
        <p className="text-xl text-gray-600 mt-4">Beautifully crafted bread images</p>
      </header>

      <section className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
        <div className="bg-white rounded-lg shadow-lg overflow-hidden">
          <img src="https://placehold.co/600x400" alt="Bread 1" className="w-full h-64 object-cover" />
          <div className="p-6">
            <h2 className="text-2xl font-semibold text-gray-800">Classic Baguette</h2>
            <p className="text-gray-600 mt-2">A traditional French baguette with a crispy crust and soft interior.</p>
          </div>
        </div>

        <div className="bg-white rounded-lg shadow-lg overflow-hidden">
          <img src="https://placehold.co/600x400" alt="Bread 2" className="w-full h-64 object-cover" />
          <div className="p-6">
            <h2 className="text-2xl font-semibold text-gray-800">Sourdough Loaf</h2>
            <p className="text-gray-600 mt-2">A tangy sourdough loaf with a chewy texture and rich flavor.</p>
          </div>
        </div>

        <div className="bg-white rounded-lg shadow-lg overflow-hidden">
          <img src="https://placehold.co/600x400" alt="Bread 3" className="w-full h-64 object-cover" />
          <div className="p-6">
            <h2 className="text-2xl font-semibold text-gray-800">Whole Grain Bread</h2>
            <p className="text-gray-600 mt-2">A healthy whole grain bread packed with nutrients and fiber.</p>
          </div>
        </div>

        <div className="bg-white rounded-lg shadow-lg overflow-hidden">
          <img src="https://placehold.co/600x400" alt="Bread 4" className="w-full h-64 object-cover" />
          <div className="p-6">
            <h2 className="text-2xl font-semibold text-gray-800">Ciabatta</h2>
            <p className="text-gray-600 mt-2">An Italian ciabatta with a light, airy texture and a crisp crust.</p>
          </div>
        </div>

        <div className="bg-white rounded-lg shadow-lg overflow-hidden">
          <img src="https://placehold.co/600x400" alt="Bread 5" className="w-full h-64 object-cover" />
          <div className="p-6">
            <h2 className="text-2xl font-semibold text-gray-800">Rye Bread</h2>
            <p className="text-gray-600 mt-2">A dense rye bread with a distinctive flavor and hearty texture.</p>
          </div>
        </div>

        <div className="bg-white rounded-lg shadow-lg overflow-hidden">
          <img src="https://placehold.co/600x400" alt="Bread 6" className="w-full h-64 object-cover" />
          <div className="p-6">
            <h2 className="text-2xl font-semibold text-gray-800">Brioche</h2>
            <p className="text-gray-600 mt-2">A rich and buttery brioche with a tender crumb and golden crust.</p>
          </div>
        </div>
      </section>

      <footer className="text-center mt-12 text-gray-600">
        <p>© 2025 パンの画像生成. All rights reserved.</p>
      </footer>
    </div>
  );
};

export default App;