Merge pull request #28 from anushree0809/fix/create-resources-page

Create resource section

ayurveda/src/components/Resources.jsx

@@ -1,19 +1,106 @@
-// 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.', 
+                thumbnail: 'r1.png' 
+            },
+            { 
+                title: 'Principles of Ayurveda', 
+                link: 'https://ayush.delhi.gov.in/ayush/fundamental-principles',
+                thumbnail: 'r2.png'
+            }
+        ],
+        'AI in Healthcare': [
+            { 
+                title: 'AI in Healthcare: How AI is Transforming Healthcare', 
+                link: 'https://www.ncbi.nlm.nih.gov/pmc/articles/PMC6616181/', 
+                thumbnail: 'r3.png' 
+            },
+            { 
+                title: 'Benefits of AI in Healthcare', 
+                link: 'https://builtin.com/artificial-intelligence/artificial-intelligence-healthcare',
+                thumbnail: 'r4.png'
+            }
+        ],
+        'Herbal Remedies': [
+            { 
+                title: 'Herbal Remedies for Common Ailments', 
+                link: 'https://www.healthline.com/health/home-remedies', 
+                thumbnail: 'r5.png' 
+            },
+            { 
+                title: 'Herbs and Their Uses in Ayurveda', 
+                link: 'https://www.medicalnewstoday.com/articles/ayurvedic-herbs',
+                thumbnail: 'r6.png'
+            }
+        ],
+        'Mental & Physical Wellness': [
+            { 
+                title: 'Mental Health and Ayurveda', 
+                link: 'https://www.ncbi.nlm.nih.gov/pmc/articles/PMC6463074/', 
+                thumbnail: 'r7.png' 
+            },
+            { 
+                title: 'Ayurvedic Practices for Physical Wellness', 
+                link: 'https://www.deepammeditours.com/blog/ayurvedic-self-care-practices-for-daily-wellness/',
+                thumbnail: 'r8.png'
+            }
+        ]
+    };
+
+    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>Explore valuable resources on Ayurveda, AI in Healthcare, and more:</p>
+
+            <div className="resources-grid">
+                {Object.entries(resourcesData).map(([category, resources]) => (
+                    <div key={category} className="resource-category">
+                        <h2>{category}</h2>
+                        <div className="resource-grid">
+                            {resources.map((resource, index) => (
+                                <div key={index} className="resource-card">
+                                    <img 
+                                        src={resource.thumbnail} 
+                                        alt={resource.title} 
+                                        className="resource-thumbnail" 
+                                    />
+                                    <a href={resource.link} target="_blank" rel="noopener noreferrer" className="App-link">
+                                        <h3>{resource.title}</h3>
+                                    </a>
+                                </div>
+                            ))}
+                        </div>
+                    </div>
+                ))}
+            </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,103 @@
+.resources-section {
+    padding: 20px;
+    max-width: 1200px;
+    margin: auto;
+    background-color: #f9f9f9;
+    border-radius: 8px;
+    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+    font-family: 'Helvetica Neue', sans-serif;
+}
+
+h1 {
+    text-align: center;
+    color: #333;
+    margin-bottom: 20px;
+    font-size: 2.5rem;
+}
+
+h2 {
+    margin-top: 40px;
+    color: #007bff;
+    font-size: 1.8rem;
+}
+
+.resources-grid {
+    display: flex;
+    flex-direction: column;
+    gap: 40px;
+}
+
+.resource-category {
+    padding: 20px;
+}
+
+.resource-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+    gap: 20px;
+}
+
+.resource-card {
+    background-color: white;
+    padding: 10px;
+    border-radius: 10px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+    text-align: center;
+    transition: transform 0.3s ease;
+}
+
+.resource-card:hover {
+    transform: scale(1.05);
+    background-color: rgb(223, 230, 242);
+}
+
+.resource-thumbnail {
+    width: 100%;
+    height: 150px;
+    object-fit: cover;
+    border-radius: 10px;
+    margin-bottom: 10px;
+}
+
+h3 {
+    font-size: 1.2rem;
+    margin-bottom: 0;
+}
+
+.App-link {
+    color: #007bff;
+    text-decoration: none;
+    transition: color 0.3s;
+}
+
+.App-link:hover {
+    color: #0056b3;
+}
+
+.suggestion-form {
+    margin-top: 40px;
+    text-align: center;
+}
+
+.suggestion-input {
+    padding: 10px;
+    width: 60%;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+    margin-bottom: 20px;
+}
+
+.suggestion-button {
+    padding: 10px 20px;
+    background-color: #28a745;
+    margin-left: 10px;
+    color: white;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    transition: background-color 0.3s;
+}
+
+.suggestion-button:hover {
+    background-color: #218838;
+}