Create resource section

ayurveda/src/components/Resources.jsx

@@ -1,19 +1,66 @@
 // src/pages/Resources.jsx
-import React from 'react';
+import React, { useState } from 'react';
 import '../App.css';
+import '../styles/ResourcesPage.css';
 
 const Resources = () => {
+    const [suggestion, setSuggestion] = useState('');
+
+    const resourcesData = {
+        'Ayurveda Basics': [
+            { title: 'Introduction to Ayurveda', link: 'https://ayurveda.com/ayurveda-a-brief-introduction-and-guide/#:~:text=In%20Sanskrit%2C%20Ayurveda%20means%20%E2%80%9CThe,accomplished%20masters%20to%20their%20disciples.' },
+            { title: 'Principles of Ayurveda', link: 'https://ayush.delhi.gov.in/ayush/fundamental-principles' },
+        ],
+        'AI in Healthcare': [
+            { title: 'AI in Healthcare: How AI is Transforming Healthcare', link: 'https://www.ncbi.nlm.nih.gov/pmc/articles/PMC6616181/' },
+            { title: 'Benefits of AI in Healthcare', link: 'https://builtin.com/artificial-intelligence/artificial-intelligence-healthcare' },
+        ],
+        'Herbal Remedies': [
+            { title: 'Herbal Remedies for Common Ailments', link: 'https://www.healthline.com/health/home-remedies' },
+            { title: 'Herbs and Their Uses in Ayurveda', link: 'https://www.medicalnewstoday.com/articles/ayurvedic-herbs' },
+        ],
+        'Mental & Physical Wellness': [
+            { title: 'Mental Health and Ayurveda', link: 'https://www.ncbi.nlm.nih.gov/pmc/articles/PMC6463074/' },
+            { title: 'Ayurvedic Practices for Physical Wellness', link: 'https://www.deepammeditours.com/blog/ayurvedic-self-care-practices-for-daily-wellness/' },
+        ],
+    };
+
+    const handleSuggestionSubmit = (e) => {
+        e.preventDefault();
+        console.log('Suggested Resource:', suggestion);
+        setSuggestion('');
+    };
+
     return (
         <div className="resources-section">
             <h1>Resources</h1>
-            <p>
-                Here are some valuable resources that you can explore:
-            </p>
-            <ul className="resource-list">
-                <li><a href="#resource1" className="App-link">Resource 1</a></li>
-                <li><a href="#resource2" className="App-link">Resource 2</a></li>
-                <li><a href="#resource3" className="App-link">Resource 3</a></li>
-            </ul>
+            <p>Here are some valuable resources that you can explore:</p>
+            {Object.entries(resourcesData).map(([category, resources]) => (
+                <div key={category} className="resource-category">
+                    <h2>{category}</h2>
+                    <ul className="resource-list">
+                        {resources.map((resource, index) => (
+                            <li key={index}>
+                                <a href={resource.link} target="_blank" rel="noopener noreferrer" className="App-link">
+                                    {resource.title}
+                                </a>
+                            </li>
+                        ))}
+                    </ul>
+                </div>
+            ))}
+            <h2>Suggest a Resource</h2>
+            <form onSubmit={handleSuggestionSubmit} className="suggestion-form">
+                <input
+                    type="text"
+                    value={suggestion}
+                    onChange={(e) => setSuggestion(e.target.value)}
+                    placeholder="Enter your suggestion"
+                    required
+                    className="suggestion-input"
+                />
+                <button type="submit" className="suggestion-button">Submit</button>
+            </form>
         </div>
     );
 };

ayurveda/src/styles/ResourcesPage.css

@@ -0,0 +1,71 @@
+.resources-section {
+    padding: 20px;
+    max-width: 800px;
+    margin: auto;
+    background-color: #f9f9f9;
+    border-radius: 8px;
+    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+}
+
+h1 {
+    text-align: center;
+    color: #333;
+    margin-bottom: 20px;
+}
+
+h2 {
+    margin-top: 20px;
+    margin-bottom: 10px;
+    color: #007bff;
+}
+
+.resource-list {
+    list-style-type: none;
+    padding: 0;
+}
+
+.resource-list li {
+    margin: 10px 0;
+}
+
+.App-link {
+    color: #007bff;
+    text-decoration: none;
+    padding: 5px 10px;
+    border-radius: 5px;
+    transition: background-color 0.3s;
+}
+
+.App-link:hover {
+    background-color: rgba(0, 123, 255, 0.1);
+    text-decoration: underline;
+}
+
+.suggestion-form {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin-top: 20px;
+}
+
+.suggestion-input {
+    padding: 8px;
+    margin-right: 5px;
+    width: 60%;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+}
+
+.suggestion-button {
+    padding: 8px 12px;
+    background-color: #28a745;
+    color: white;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    transition: background-color 0.3s;
+}
+
+.suggestion-button:hover {
+    background-color: #218838;
+}