Create Mental Health Resource Library

[Jai-76]

Read anonymous stories from others about their mental health journeys
Submit their own stories via a simple form interface
Stories appear in real-time without page refresh
Simple and anonymous format to encourage sharing

<title>Mental Health Resource Library</title> <script src="https://cdn.tailwindcss.com"></script> <style> @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

    body {
        font-family: 'Inter', sans-serif;
        transition: all 0.3s ease;
    }


    .resource-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
    }


    .search-highlight {
        background-color: #FDE68A;
        padding: 0 2px;
        border-radius: 2px;
    }


    .fade-in {
        animation: fadeIn 0.3s ease-in;
    }


    @keyframes fadeIn {
        from { opacity: 0; transform: translateY(10px); }
        to { opacity: 1; transform: translateY(0); }
    }


    /* Custom scrollbar */
    ::-webkit-scrollbar {
        width: 8px;
    }


    ::-webkit-scrollbar-track {
        background: #f1f1f1;
    }


    ::-webkit-scrollbar-thumb {
        background: #888;
        border-radius: 4px;
    }


    ::-webkit-scrollbar-thumb:hover {
        background: #555;
    }


    /* Modal styles */
    #resultModal {
        transition: opacity 0.3s ease;
    }


    #resultModal .bg-white {
        transition: transform 0.3s ease, opacity 0.3s ease;
        transform: translateY(-20px);
        opacity: 0;
    }


    #resultModal.active {
        display: flex;
        opacity: 1;
    }


    #resultModal.active .bg-white {
        transform: translateY(0);
        opacity: 1;
    }


    /* Ensure modal content is scrollable */
    .max-h-\[90vh\] {
        max-height: 90vh;
    }
</style>

Mental Health Resource Library

Find professional help, self-care tips, and support for your wellbeing

<main class="container mx-auto px-4 md:px-8 lg:px-16 py-12">
    <!-- Featured Resources -->
    <section class="mb-16">
        <h2 class="text-2xl md:text-3xl font-semibold mb-8 text-gray-800 border-b-2 border-gray-200 pb-2">Featured Resources</h2>
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            <!-- Featured Resource 1 -->
            <div class="resource-card bg-white rounded-xl shadow-md overflow-hidden transition-all duration-300 hover:shadow-lg">
                <div class="h-48 overflow-hidden">
                    <img src="https://storage.googleapis.com/workspace-0f70711f-8b4e-4d94-86f1-2a93ccde5887/image/b92053d7-79ba-431b-8d39-1932a20622ce.png" alt="Therapist and client having a calm conversation in a bright counseling office" class="w-full h-full object-cover" onerror="this.parentElement.style.backgroundColor='#f0f9ff'">
                </div>
                <div class="p-6">
                    <div class="uppercase tracking-wide text-sm text-indigo-600 font-semibold">Professional Support</div>
                    <h3 class="mt-2 text-xl font-semibold text-gray-900">Finding a Therapist</h3>
                    <p class="mt-2 text-gray-600">
                        Learn how to find a qualified mental health professional that fits your needs.
                    </p>
                    <button class="mt-4 px-4 py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700 transition-colors">
                        View Guide
                    </button>
                </div>
            </div>


            <!-- Featured Resource 2 -->
            <div class="resource-card bg-white rounded-xl shadow-md overflow-hidden transition-all duration-300 hover:shadow-lg">
                <div class="h-48 overflow-hidden">
                    <img src="https://storage.googleapis.com/workspace-0f70711f-8b4e-4d94-86f1-2a93ccde5887/image/6ec51c71-2baf-421c-878a-bed047516608.png" alt="Person practicing meditation with incense and candles in a peaceful home setting" class="w-full h-full object-cover" onerror="this.parentElement.style.backgroundColor='#f0f9ff'">
                </div>
                <div class="p-6">
                    <div class="uppercase tracking-wide text-sm text-green-600 font-semibold">Self-Care</div>
                    <h3 class="mt-2 text-xl font-semibold text-gray-900">Mindfulness Techniques</h3>
                    <p class="mt-2 text-gray-600">
                        Practical mindfulness exercises to reduce stress and improve mental clarity.
                    </p>
                    <button class="mt-4 px-4 py-2 bg-green-600 text-white rounded-md hover:bg-green-700 transition-colors">
                        Try Now
                    </button>
                </div>
            </div>


            <!-- Featured Resource 3 -->
            <div class="resource-card bg-white rounded-xl shadow-md overflow-hidden transition-all duration-300 hover:shadow-lg">
                <div class="h-48 overflow-hidden">
                    <img src="https://storage.googleapis.com/workspace-0f70711f-8b4e-4d94-86f1-2a93ccde5887/image/3a591fee-8795-4e1e-95cc-72917c505f74.png" alt="Support group meeting with diverse participants in a circle discussion" class="w-full h-full object-cover" onerror="this.parentElement.style.backgroundColor='#f0f9ff'">
                </div>
                <div class="p-6">
                    <div class="uppercase tracking-wide text-sm text-purple-600 font-semibold">Community</div>
                    <h3 class="mt-2 text-xl font-semibold text-gray-900">Support Groups</h3>
                    <p class="mt-2 text-gray-600">
                        Connect with others facing similar challenges through local and online groups.
                    </p>
                    <button class="mt-4 px-4 py-2 bg-purple-600 text-white rounded-md hover:bg-purple-700 transition-colors">
                        Find Groups
                    </button>
                </div>
            </div>
        </div>
    </section>


    <!-- Search and Filter -->
    <section class="mb-16">
        <div class="bg-white rounded-xl shadow-md p-6 sticky top-4 z-10">
            <div class="relative">
                <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                    <svg class="h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                        <path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd" />
                    </svg>
                </div>
                <input id="searchInput" type="text" class="block w-full pl-10 pr-3 py-3 border border-gray-300 rounded-lg bg-gray-50 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500" placeholder="Search resources...">
            </div>
            <div class="flex flex-wrap gap-4 mt-4">
                <button class="filter-btn px-4 py-2 rounded-full bg-gray-100 text-gray-700 hover:bg-gray-200 active:bg-gray-300 transition-colors" data-category="all">All</button>
                <button class="filter-btn px-4 py-2 rounded-full bg-gray-100 text-gray-700 hover:bg-gray-200 active:bg-gray-300 transition-colors" data-category="anxiety">Anxiety</button>
                <button class="filter-btn px-4 py-2 rounded-full bg-gray-100 text-gray-700 hover:bg-gray-200 active:bg-gray-300 transition-colors" data-category="depression">Depression</button>
                <button class="filter-btn px-4 py-2 rounded-full bg-gray-100 text-gray-700 hover:bg-gray-200 active:bg-gray-300 transition-colors" data-category="stress">Stress</button>
                <button class="filter-btn px-4 py-2 rounded-full bg-gray-100 text-gray-700 hover:bg-gray-200 active:bg-gray-300 transition-colors" data-category="therapy">Therapy</button>
                <button class="filter-btn px-4 py-2 rounded-full bg-gray-100 text-gray-700 hover:bg-gray-200 active:bg-gray-300 transition-colors" data-category="self-care">Self-Care</button>
            </div>
        </div>
    </section>


    <!-- Resource List -->
    <section>
        <h2 class="text-2xl md:text-3xl font-semibold mb-8 text-gray-800 border-b-2 border-gray-200 pb-2">All Resources</h2>
        <div id="resourcesContainer" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            <!-- Resources will be dynamically inserted here -->
        </div>
        <div id="noResults" class="hidden text-center py-12">
            <img src="https://storage.googleapis.com/workspace-0f70711f-8b4e-4d94-86f1-2a93ccde5887/image/d95a72b3-7184-4d64-8272-3712cb23c8df.png" alt="Empty clipboard with magnifying glass representing no results found" class="mx-auto mb-6 max-w-xs" onerror="this.parentElement.style.display='none'">
            <h3 class="text-2xl font-semibold text-gray-700 mb-2">No Resources Found</h3>
            <p class="text-gray-500">Try adjusting your search or filter criteria</p>
        </div>
    </section>
</main>


<!-- Result Display Modal -->
<div id="resultModal" class="hidden fixed inset-0 bg-black bg-opacity-50 z## 30 flex items-center justify-center p-4">
    <div class="bg-white rounded-xl max-w-2xl w-full max-h-[90vh] overflow-y-auto">
        <div class="p-6">
            <div class="flex justify-between items-start">
                <h3 id="modalTitle" class="text-2xl font-bold text-gray-800"></h3>
                <button id="closeModal" class="text-gray-500 hover:text-gray-700">&times;</button>
            </div>
            <div id="modalContent" class="mt-4 text-gray-600">
                <!-- Content will be inserted here -->
            </div>
        </div>
    </div>
</div>


<footer class="bg-gray-800 text-white py-12 px-4 md:px-8 lg:px-16">
    <div class="container mx-auto">
        <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
            <div>
                <h3 class="text-lg font-semibold mb-4">Quick Links</h3>
                <ul class="space-y-2">
                    <li><a href="#" class="text-gray-300 hover:text-white transition-colors">Home</a></li>
                    <li><a href="#" class="text-gray-300 hover:text-white transition-colors">Resources</a></li>
                    <li><a href="#" class="text-gray-300 hover:text-white transition-colors">About Us</a></li>
                    <li><a href="#" class="text-gray-300 hover:text-white transition-colors">Contact</a></li>
                </ul>
            </div>
            <div>
                <h3 class="text-lg font-semibold mb-4">Crisis Support</h3>
                <ul class="space-y-2">
                    <li><a href="#" class="text-gray-300 hover:text-white transition-colors">National Suicide Prevention Lifeline</a></li>
                    <li><a href="#" class="text-gray-300 hover:text-white transition-colors">Crisis Text Line</a></li>
                    <li><a href="#" class="text-gray-300 hover:text-white transition-colors">Emergency Contacts</a></li>
                </ul>
            </div>
            <div>
                <h3 class="text-lg font-semibold mb-4">Legal</h3>
                <ul class="space-y-2">
                    <li><a href="#" class="text-gray-300 hover:text-white transition-colors">Privacy Policy</a></li>
                    <li><a href="#" class="text-gray-300 hover:text-white transition-colors">Terms of Service</a></li>
                    <li><a href="#" class="text-gray-300 hover:text-white transition-colors">DMCA</a></li>
                </ul>
            </div>
            <div>
                <h3 class="text-lg font-semibold mb-4">Connect</h3>
                <div class="flex space-x-4">
                    <a href="#" aria-label="Twitter">
                        <svg class="h-6 w-6 text-gray-300 hover:text-white transition-colors" fill="currentColor" viewBox="0 0 24 24">
                            <path d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84"></path>
                        </svg>
                    </a>
                    <a href="#" aria-label="Facebook">
                        <svg class="h-6 w-6 text-gray-300 hover:text-white transition-colors" fill="currentColor" viewBox="0 0 24 24">
                            <path fill-rule="evenodd" d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z" clip-rule="evenodd"></path>
                        </svg>
                    </a>
                    <a href="#" aria-label="Instagram">
                        <svg class="h-6 w-6 text-gray-300 hover:text-white transition-colors" fill="currentColor" viewBox="0 0 24 24">
                            <path fill-rule="evenodd" d="M12.315 2c2.43 0 2.784.013 3.808.06 1.064.049 1.791.218 2.427.465a4.902 4.902 0 011.772 1.153 4.902 4.902 0 011.153 1.772c.247.636.416 1.363.465 2.427.048 1.067.06 1.407.06 4.123v.08c0 2.643-.012 2.987-.06 4.043-.049 1.064-.218 1.791-.465 2.427a4.902 4.902 0 01-1.153 1.772 4.902 4.902 0 01-1.772 1.153c-.636.247-1.363.416-2.427.465-1.067.048-1.407.06-4.123.06h-.08c-2.643 0-2.987-.012-4.043-.06-1.064-.049-1.791-.218-2.427-.465a4.902 4.902 0 01-1.772-1.153 4.902 4.902 0 01-1.153-1.772c-.247-.636-.416-1.363-.465-2.427-.047-1.024-.06-1.379-.06-3.808v-.63c0-2.43.013-2.784.06-3.808.049-1.064.218-1.791.465-2.427a4.902 4.902 0 011.153-1.772A4.902 4.902 0 015.45 2.525c.636-.247 1.363-.416 2.427-.465C8.901 2.013 9.256 2 11.685 2h.63zm-.081 1.802h-.468c-2.456 0-2.784.011-3.807.058-.975.045-1.504.207-1.857.344-.467.182-.8.398-1.15.748-.35.35-.566.683-.748 1.15-.137.353-.3.882-.344 1.857-.047 1.023-.058 1.351-.058 3.807v.468c0 2.456.011 2.784.058 3.807.045.975.207 1.504.344 1.857.182.466.399.8.748 1.15.35.35.683.566 1.15.748.353.137.882.3 1.857.344 1.054.048 1.37.058 4.041.058h.08c2.597 0 2.917-.01 3.96-.058.976-.045 1.505-.207 1.858-.344.466-.182.8-.398 1.15-.748.35-.35.566-.683.748-1.15.137-.353.3-.882.344-1.857.048-1.055.058-1.37.058-4.041v-.08c0-2.597-.01-2.917-.058-3.96-.045-.976-.207-1.505-.344-1.858a3.097 3.097 0 00-.748-1.15 3.098 3.098 0 00-1.15-.748c-.353-.137-.882-.3-1.857-.344-1.023-.047-1.351-.058-3.807-.058zM12 6.865a5.135 5.135 0 110 10.27 5.135 5.135 0 010-10.27zm0 1.802a3.333 3.333 0 100 6.666 3.333 3.333 0 000-6.666zm5.338-3.205a1.2 1.2 0 110 2.4 1.2 1.2 0 010-2.4z" clip-rule="evenodd"></path>
                        </svg>
                    </a>
                </div>
                <p class="mt-4 text-gray-300 text-sm">
                    Subscribe to our newsletter for new resources and updates
                </p>
                <div class="mt-2 flex">
                    <input type="email" placeholder="Your email" class="px-4 py-2 w-full rounded-l-lg focus:outline-none text-gray-800">
                    <button class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-r-lg transition-colors">
                        Sign Up
                    </button>
                </div>
            </div>
        </div>
        <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400 text-sm">
            <p>© 2023 Mental Health Resource Library. All content provided for informational purposes only.</p>
        </div>
    </footer>
</div>


<script>
    // Resource data
    const resources = [
        {
            title: "Understanding Anxiety Disorders",
            description: "Comprehensive guide to recognizing and managing different types of anxiety disorders.",
            category: "anxiety",
            type: "article",
            featured: false
        },
        {
            title: "Cognitive Behavioral Therapy for Depression",
            description: "How CBT techniques can help reframe negative thought patterns associated with depression.",
            category: "depression",
            type: "video",
            featured: false
        },
        {
            title: "Mindfulness Meditation Guide",
            description: "Step-by-step instructions for practicing mindfulness meditation to reduce stress.",
            category: "stress",
            type: "article",
            featured: false
        },
        {
            title: "Finding the Right Therapist",
            description: "Questions to ask and factors to consider when choosing a mental health professional.",
            category: "therapy",
            type: "guide",
            featured: false
        },
        {
            title: "Sleep Hygiene for Better Mental Health",
            description: "How improving sleep habits can significantly impact your overall mental wellbeing.",
            category: "self-care",
            type: "article",
            featured: false
        },
        {
            title: "Coping with Panic Attacks",
            description: "Evidence-based techniques to manage and reduce the intensity of panic attacks.",
            category: "anxiety",
            type: "guide",
            featured: false
        },
        {
            title: "Journaling for Emotional Processing",
            description: "Using writing as a tool to understand and process difficult emotions.",
            category: "self-care",
            type: "article",
            featured: false
        },
        {
            title: "The Science of Happiness",
            description: "Research-backed practices to cultivate lasting happiness and life satisfaction.",
            category: "depression",
            type: "video",
            featured: false
        },
        {
            title: "Workplace Stress Management",
            description: "Strategies for maintaining mental health in high-pressure work environments.",
            category: "stress",
            type: "guide",
            featured: false
        },
        {
            title: "Different Types of Therapy Explained",
            description: "Overview of various therapeutic approaches and what they're best suited for.",
            category: "therapy",
            type: "article",
            featured: false
        },
        {
            title: "Building Resilience",
            description: "How to develop emotional resilience to better handle life's challenges.",
            category: "self-care",
            type: "article",
            featured: false
        },
        {
            title: "Social Connections and Mental Health",
            description: "The importance of maintaining healthy relationships for emotional wellbeing.",
            category: "depression",
            type: "video",
            featured: false
        }
    ];


    // DOM elements
    const searchInput = document.getElementById('searchInput');
    const filterButtons = document.querySelectorAll('.filter-btn');
    const resourcesContainer = document.getElementById('resourcesContainer');
    const noResults = document.getElementById('noResults');


    // Current filter state
    let currentFilter = 'all';
    let currentSearchTerm = '';


    // Initialize the resources
    function initResources() {
        renderResources(resources);
    }


    // Render resources based on current filter and search
    function renderResources(resourcesToRender) {
        resourcesContainer.innerHTML = '';


        if (resourcesToRender.length === 0) {
            noResults.classList.remove('hidden');
            return;
        }


        noResults.classList.add('hidden');


        resourcesToRender.forEach(resource => {
            const card = document.createElement('div');
            card.className = 'resource-card bg-white rounded-xl shadow-md overflow-hidden transition-all duration-300 hover:shadow-lg fade-in';


            // Determine type icon and color
            let typeBadge = '';
            let typeBadgeColor = '';
            switch(resource.type) {
                case 'article':
                    typeBadge = 'Article';
                    typeBadgeColor = 'bg-blue-100 text-blue-800';
                    break;
                case 'video':
                    typeBadge = 'Video';
                    typeBadgeColor = 'bg-red-100 text-red-800';
                    break;
                case 'guide':
                    typeBadge = 'Guide';
                    typeBadgeColor = 'bg-green-100 text-green-800';
                    break;
                default:
                    typeBadge = 'Resource';
                    typeBadgeColor = 'bg-purple-100 text-purple-800';
            }


            // Determine category color
            let categoryColor = '';
            switch(resource.category) {
                case 'anxiety':
                    categoryColor = 'text-yellow-600';
                    break;
                case 'depression':
                    categoryColor = 'text-blue-600';
                    break;
                case 'stress':
                    categoryColor = 'text-orange-600';
                    break;
                case 'therapy':
                    categoryColor = 'text-indigo-600';
                    break;
                case 'self-care':
                    categoryColor = 'text-green-600';
                    break;
            }


            // Highlight search term in title and description
            const title = highlightSearchTerm(resource.title, currentSearchTerm);
            const description = highlightSearchTerm(resource.description, currentSearchTerm);


            card.innerHTML = `
                <div class="h-48 overflow-hidden">
                    <img src="https://storage.googleapis.com/workspace-0f70711f-8b4e-4d94-86f1-2a93ccde5887/image/3deccb34-0ef5-43d6-aa16-a557e93af072.png" alt="${resource.title} resource cover showing ${resource.category} related imagery" class="w-full h-full object-cover" onerror="this.parentElement.style.backgroundColor='#f8fafc'">
                </div>
                <div class="p-6">
                    <div class="flex justify-between items-start mb-2">
                        <div class="uppercase tracking-wide text-sm font-semibold ${categoryColor}">${resource.category.replace('-', ' ')}</div>
                        <span class="text-xs px-2 py-1 rounded-full ${typeBadgeColor}">${typeBadge}</span>
                    </div>
                    <h3 class="mt-1 text-xl font-semibold text-gray-900">${title}</h3>
                    <p class="mt-2 text-gray-600">${description}</p>
                    <button onclick="showResource('${resource.title}', '${resource.description}', '${resource.category}', '${resource.type}')" class="mt-4 px-4 py-2 bg-gray-100 text-gray-700 rounded-md hover:bg-gray-200 transition-colors w-full">
                        View Details
                    </button>
                </div>
            `;


            // Add click handler to entire card
            card.addEventListener('click', () => {
                showResource(resource.title, resource.description, resource.category, resource.type);
            });
            resourcesContainer.appendChild(card);
        });
    }


    // Highlight search term in text
    function highlightSearchTerm(text, term) {
        if (!term) return text;


        const regex = new RegExp(term, 'gi');
        return text.replace(regex, match => `<span class="search-highlight">${match}</span>`);
    }


    // Filter resources based on search term and category
    function filterResources() {
        let filtered = [...resources];


        // Apply category filter
        if (currentFilter !== 'all') {
            filtered = filtered.filter(resource => resource.category === currentFilter);
        }


        // Apply search filter
        if (currentSearchTerm) {
            const term = currentSearchTerm.toLowerCase();
            filtered = filtered.filter(resource => 
                resource.title.toLowerCase().includes(term) || 
                resource.description.toLowerCase().includes(term) ||
                resource.category.toLowerCase().includes(term) ||
                resource.type.toLowerCase().includes(term)
            );
        }


        renderResources(filtered);
    }


    // Event listeners
    searchInput.addEventListener('input', (e) => {
        currentSearchTerm = e.target.value.trim().toLowerCase();
        filterResources();
    });


    filterButtons.forEach(button => {
        button.addEventListener('click', () => {
            // Update active button styling
            filterButtons.forEach(btn => {
                btn.classList.remove('bg-indigo-600', 'text-white');
                btn.classList.add('bg-gray-100', 'text-gray-700');
            });


            button.classList.remove('bg-gray-100', 'text-gray-700');
            button.classList.add('bg-indigo-600', 'text-white');


            currentFilter = button.dataset.category;
            filterResources();
        });
    });


    // Modal functions
    function showResource(title, description, category, type) {
        const modal = document.getElementById('resultModal');
        document.getElementById('modalTitle').textContent = title;


        let content = `
            <p><strong>Category:</strong> <span class="capitalize">${category.replace('-', ' ')}</span></p>
            <p><strong>Type:</strong> ${type}</p>
            <p class="mt-4">${description}</p>
        `;


        document.getElementById('modalContent').innerHTML = content;
        modal.classList.remove('hidden');
        setTimeout(() => modal.classList.add('active'), 10);
    }


    function closeModal() {
        const modal = document.getElementById('resultModal');
        modal.classList.remove('active');
        setTimeout(() => modal.classList.add('hidden'), 300);
    }


    // Initialize
    document.addEventListener('DOMContentLoaded', () => {
        initResources();
        document.getElementById('closeModal').addEventListener('click', closeModal);
    });
</script>

[eccentriccoder01]

@Jai-76 It's not clear what you've done and how you've integrated it to the app. Your file "Mental Health Resource Library" doesn't have any extension, nor is it integrated into any part of the app. It just looks like a piece of code purely generated with AI. There is no deployment link to a modified app, nor is this PR linked to the issue which you had created. Please clarify and elaborate on what you're actually planning to do.