You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
DeltaX/Frontend/src/components/ConsumerHomePage.jsx

41 lines
2.0 KiB

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 pricingbuilding 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;