components

frontend/src/AgroShopAI/components/Pages/FarmerSuccessStories.jsx

@@ -0,0 +1,47 @@
+export default function FarmerSuccessStories() {
+  const [searchTerm, setSearchTerm] = useState("");
+  const [selectedStory, setSelectedStory] = useState(null);
+
+  const filteredStories = dummyStories.filter(
+    (story) =>
+      story.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
+      story.location.toLowerCase().includes(searchTerm.toLowerCase()) ||
+      story.cropType.toLowerCase().includes(searchTerm.toLowerCase()) ||
+      story.technology.toLowerCase().includes(searchTerm.toLowerCase())
+  );
+
+  return (
+    <div className="min-h-screen bg-white text-gray-800">
+      <Header />
+
+      <main className="container mx-auto px-4 py-8">
+        <section className="mb-8">
+          <p className="text-lg">
+            Discover inspiring stories of farmers who have embraced sustainable
+            practices and innovative technologies to transform their
+            agricultural journey.
+          </p>
+        </section>
+
+        <SearchBar searchTerm={searchTerm} setSearchTerm={setSearchTerm} />
+
+        <section className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+          {filteredStories.map((story) => (
+            <StoryCard
+              key={story.id}
+              story={story}
+              onClick={setSelectedStory}
+            />
+          ))}
+        </section>
+      </main>
+
+      {selectedStory && (
+        <StoryModal
+          story={selectedStory}
+          onClose={() => setSelectedStory(null)}
+        />
+      )}
+    </div>
+  );
+}

frontend/src/AgroShopAI/components/Pages/StoryCard.jsx

@@ -0,0 +1,25 @@
+function StoryCard({ story, onClick }) {
+  return (
+    <div className="bg-white border border-green-200 rounded-lg overflow-hidden shadow-md hover:shadow-lg transition-shadow duration-300">
+      <img
+        src={story.image}
+        alt={story.name}
+        className="w-full h-48 object-cover"
+      />
+      <div className="p-4">
+        <h2 className="text-xl font-semibold mb-2">{story.name}</h2>
+        <p className="text-sm text-gray-600 mb-2">{story.location}</p>
+        <p className="text-sm text-gray-600 mb-2">
+          {story.cropType} | {story.technology}
+        </p>
+        <p className="text-gray-700 mb-4">{story.summary}</p>
+        <button
+          onClick={() => onClick(story)}
+          className="bg-green-500 text-white px-4 py-2 rounded hover:bg-green-600 transition-colors duration-300"
+        >
+          Read More
+        </button>
+      </div>
+    </div>
+  );
+}

frontend/src/AgroShopAI/components/Pages/StoryHeader.jsx

@@ -0,0 +1,9 @@
+function Header() {
+  return (
+    <header className="bg-green-600 text-white py-6">
+      <div className="container mx-auto px-4">
+        <h1 className="text-3xl font-bold">Farmer Success Stories</h1>
+      </div>
+    </header>
+  );
+}

frontend/src/AgroShopAI/components/Pages/StoryModal.jsx

@@ -0,0 +1,21 @@
+function StoryModal({ story, onClose }) {
+  return (
+    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4">
+      <div className="bg-white rounded-lg p-8 max-w-2xl w-full max-h-[90vh] overflow-y-auto">
+        <h2 className="text-2xl font-bold mb-4">{story.name}'s Story</h2>
+        <img
+          src={story.image}
+          alt={story.name}
+          className="w-full h-64 object-cover mb-4 rounded"
+        />
+        <p className="text-gray-700 mb-4">{story.fullStory}</p>
+        <button
+          onClick={onClose}
+          className="bg-green-500 text-white px-4 py-2 rounded hover:bg-green-600 transition-colors duration-300"
+        >
+          Close
+        </button>
+      </div>
+    </div>
+  );
+}

frontend/src/AgroShopAI/components/Pages/StorySearchBar.jsx

@@ -0,0 +1,13 @@
+function SearchBar({ searchTerm, setSearchTerm }) {
+  return (
+    <section className="mb-8">
+      <input
+        type="text"
+        placeholder="Search stories..."
+        className="w-full p-2 border border-green-300 rounded"
+        onChange={(e) => setSearchTerm(e.target.value)}
+        value={searchTerm}
+      />
+    </section>
+  );
+}