Plant Care App

import React from 'react';

const App = () => {
 const plants = [
 { id: 1, name: 'Monstera', image: 'https://placehold.co/300X300', careLevel: 'Easy' },
 { id: 2, name: 'Fiddle Leaf Fig', image: 'https://placehold.co/300X300', careLevel: 'Medium' },
 { id: 3, name: 'Orchid', image: 'https://placehold.co/300X300', careLevel: 'Hard' }
 ];

 return (
 <div className="min-h-screen bg-green-50">
 <header className="bg-green-700 text-white p-6">
 <h1 className="text-3xl font-bold">Plant Care App</h1>
 <p className="text-lg">Your guide to keeping your plants healthy</p>
 </header>
 
 <section className="p-6">
 <h2 className="text-2xl font-bold mb-4">Popular Plants</h2>
 <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
 {plants.map(plant => (
 <div key={plant.id} className="bg-white rounded-lg shadow-md overflow-hidden">
 <img src={plant.image} alt={plant.name} className="w-full h-48 object-cover" />
 <div className="p-4">
 <h3 className="text-xl font-bold text-green-700">{plant.name}</h3>
 <p className="text-gray-600">Care Level: {plant.careLevel}</p>
 </div>
 </div>
 ))}
 </div>
 </section>
 
 <section className="bg-green-600 text-white p-6 mt-8">
 <h2 className="text-2xl font-bold mb-4">Plant Care Tips</h2>
 <ul className="list-disc pl-6">
 <li>Water your plants regularly.</li>
 <li>Ensure they get enough sunlight.</li>
 <li>Prune them to encourage growth.</li>
 </ul>
 </section>
 
 <footer className="bg-green-800 text-white p-6 mt-8">
 <p className="text-center">© 2025 Plant Care App. All rights reserved.</p>
 </footer>
 </div>
 );
};

export default App;