import React from "react";

function ConsumerHomePage() {
  return (
    <main className="container mx-auto px-4 py-12" style={{ backgroundColor: '#FFF7F0', fontFamily: 'Roboto, sans-serif' }}>
      <div className="flex flex-col items-center text-center">
        <h2 className="text-2xl md:text-3xl font-bold text-gray-900 mb-4">
          DIGITAL FARMER'S MARKET
        </h2>
        <h1 className="text-4xl md:text-6xl font-bold text-pink-500 mb-8">ORGANIC SHOP</h1><br />
        <div className="bg-white rounded-lg shadow-md p-4 flex justify-center items-center">
        <p className="text-gray-700 mt-4 text-sm md:text-base">
          Connecting farmers directly with consumers for fresh, local produce. Empowering sustainable agriculture with AI insights, real-time market access, and fair pricing—building a better future for all.
        </p>
      </div><br />
        <button className="bg-pink-500 hover:bg-pink-600 text-white font-bold py-2 px-4 md:py-3 md:px-6 rounded">
          Get To Know Us
        </button>
      </div>
      <div className="grid grid-cols-1 sm:grid-cols-2 gap-6 mt-12">
        <div className="bg-white rounded-lg shadow-md p-4 flex justify-center items-center">
          <img
            src="https://images.unsplash.com/photo-1603462903957-566630607cc7?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MjB8fGZyZXNoJTIwdmVnZXRhYmxlfGVufDB8fDB8fHww"
            alt="Farm Vegetables"
            className="w-50 h-50 object-cover rounded"
          />
        </div>
        <div className="bg-white rounded-lg shadow-md p-4 flex justify-center items-center">
          <img
            src="https://plus.unsplash.com/premium_photo-1661322640130-f6a1e2c36653?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTN8fGFwcGxlfGVufDB8fDB8fHww"
            alt="Apples"
            className="w-50 h-50 object-cover rounded"
          />
        </div>
      </div>
      
    </main>
  );
}

export default ConsumerHomePage;